vue.js - 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我尝试导入商店来使用它

<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 不是一种选择。

我该如何解决这个问题？

谢谢

标签： vue.jsvuejs2statestorevue-composition-api

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 中尤其需要，它没有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