如何在設定函數中存取 $vuetify 實例

Question

有沒有辦法在設定函數中存取 $vuetify （以及任何其他新增的全域）？ 有沒有辦法讓可組合項存取它？

  ...
  setup() {
    const { isDesktop } = $vuetify.breakpoints.mdAndUp; // <=== how to get $vuetify
    return { isDesktop };
  },

#

Answer 1

可組合取得 vuetify 實例：

// useVuetify.ts
import { getCurrentInstance } from 'vue'

export function useVuetify() {
  const instance = getCurrentInstance()
  if (!instance) {
    throw new Error(`useVuetify should be called in setup().`)
  }
  return instance.proxy.$vuetify
}

將其導入您的元件中：

<!-- MyComponent.vue -->
<script lang="ts">
import { useVuetify } from './useVuetify'
import { computed } from 'vue'

/*...*/
  setup() {
    const vuetify = useVuetify()
    const isDesktop = computed(()=>vuetify.breakpoints.mdAndUp)
    return { isDesktop }
  },
/*...*/
</script>

如果您使用的是Vue @vue/composition-api 而不是Vue 2.7，請將'vue' 替換為'@vue /composition-api'