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

Question

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

我的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.

我尝试了here的所有解决方案，但都不起作用。如果我删除import store from '@/store'，错误就会消失。使用vue 3不是一种选择。

我该如何解决这个问题呢？

谢谢

Answer 1

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

所以下面这几行：

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

...become：

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()

在组件的setup()中对存储区执行require操作，其中可能已经安装了@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()动态导入存储。这在没有require()__的Vite中尤其需要。

// 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