vue2 和合成 api - 无法导入存储，错误 [vue-composition-api] 在使用任何函数之前必须调用 Vue.use(VueCompositionAPI)

Question

我正在使用 vue 2.6.14 和composition-api 1.3.3 包来使用composition api。我有

我的 main.js 喜欢

import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI) 
import App from './App.vue'
import router from './router' 
Vue.config.productionTip = false 
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

我尝试开一家商店

我有一个src folder / store folder / index.js

并在里面index.js

import { reactive } from '@vue/composition-api'  

const state = reactive({
    counter : 0
})

export default{ state }

在里面App.vue我尝试导入 store 来使用它

<script>  
import store from '@/store'  
</script>

我收到错误Uncaught Error: [vue-composition-api] must call Vue.use(VueCompositionAPI) before using any function.

我尝试了这里的所有解决方案，但没有任何效果。如果我删除该import store from '@/store'错误就会消失。使用 vue 3 不是一个选择。

我该如何解决这个问题？

谢谢

Answer 1

imports 会自动提升到文件顶部，因此它实际上Vue.use(VueCompositionApi)在运行时先于 。

所以这些行：

import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI) 
import App from './App.vue'  hoisted

...变得：

import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
import App from './App.vue' 
Vue.use(VueCompositionAPI) 

因此，该插件在导入之前不会安装App.vue，从而导致您观察到的错误。

选项 1：将插件安装移动到自己的文件中

您可以将安装@vue/composition-api移至其自己的文件中，该文件可以在之前 App.vue导入：

// lib/composition-api.js
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI) 

// main.js
import Vue from 'vue'
import './lib/composition-api'
import App from 'App.vue'

演示1

选项 2：require()用于App.vue

require组件中的商店setup()，其中@vue/composition-api已经安装了：

// App.vue
import { defineComponent, computed } from '@vue/composition-api'

export default defineComponent({
  setup() {
    const store = require('@/store').default

    return {
      counter: computed(() => store.state.counter),
      increment: () => store.state.counter++,
    }
  },
})

演示2

选项 3：import()用于App.vue

使用 动态导入商店import()。这在 Vite 中尤其需要，因为 Vite 没有require().

// App.vue
import { defineComponent, computed, ref } from '@vue/composition-api'

export default defineComponent({
  setup() {
    const store = ref()
    import('@/store').then(mod => store.value = mod.default)

    return {
      counter: computed(() => store.value?.state.counter),
      increment: () => store.value && store.value.state.counter++,
    }
  },
})

演示3