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

Question

我正在使用 vue 2.6.14 和 composition-api 1.3.3 包来使用组合 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.

我尝试了here 的所有解决方案，但没有任何效果。如果我删除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'

demo 1

选项 2：在 App.vue 中使用 require()

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++,
    }
  },
})

demo 2

选项 3：在 App.vue 中使用 import()

使用import() 动态导入商店。 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++,
    }
  },
})

demo 3