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

Posted 2023-03-16

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

【英文标题】：vue2 and composition api - cannot import store, error [vue-composition-api] must call Vue.use(VueCompositionAPI) before using any function

【发布时间】：2021-12-19 02:57:45

【问题描述】：

我正在使用 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 不是一种选择。

我该如何解决这个问题？

谢谢

【参考方案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

【讨论】：

好的，谢谢。关于 mainjs 和 Appjs 现在如何，我仍然得到 Object(...) is not a function at setup (App.vue?234e:19) 我什至无法解释......有什么帮助吗？

我的建议在我的本地沙箱中有效。你能分享一个重现新问题的链接吗？

见demo

@codebot 该错误通常意味着您搞砸了导入/导出。您或框架期望成为对象的东西实际上是一个函数。您可以通过单击链接来追踪错误。