Vue 3：ref、reactive 和 computed 的全局导入

Question

如何在 main.js、reactive 和 computed 中使用 Vue 3 进行全局导入？

我试图避免在每个组件中这样做：

import { ref, reactive, computed } from 'vue'

Answer 1

不确定这是个好主意（它可能会阻止 tree shaking），但可以通过将它们添加到 window:

来使它们成为全局的

// main.js
import { ref, reactive, computed } from 'vue'

window.ref = ref
window.reactive = reactive
window.computed = computed

如果使用 ESLint，请确保配置这些全局变量：

// eslintrc.js
module.exports = {
  globals: {
    ref: true,
    reactive: true,
    computed: true,
  }
}

Answer 2

npm i vue-global-api
// main.js
import 'vue-global-api'

Vue 3: global import for ref, reactive and computed