Vue.use()引发"无法读取未定义"的属性'use'

2022-03-03 00:00:00 vue.js vuejs3 vuex vuex4

尝试%1

main.js

import { createApp } from 'vue'
import { store } from './store/store'
import App from './App.vue'

Vue.config.productionTip = false

const app = createApp(App)

app.use(store)

app.mount('#app')

store.js

import Vuex from 'vuex'
import Vue from 'vue'

Vue.use(Vuex)

export const store = new Vuex.Store({
  state: {
    patients: []
  }
});

尝试%1错误

Uncaught TypeError: Cannot read property 'use' of undefined
    at eval (store.js?07a4:4)
    at Module../src/store/store.js (app.js:1342)

尝试2

main.js

import { createApp } from 'vue'
import { store } from './store/store'
import App from './App.vue'

Vue.config.productionTip = false

const app = createApp(App)

app.use(store)

app.mount('#app')

store.js

import Vuex from 'vuex'
import Vue from 'vue'

export const store = new Vuex.Store({
  state: {
    patients: []
  }
});

尝试2个错误

vuex.esm.js?94ea:135 Uncaught Error: [vuex] must call Vue.use(Vuex) before creating a store instance.
    at assert (vuex.esm.js?94ea:135)
    at new Store (vuex.esm.js?94ea:380)
    at eval (store.js?07a4:6)

我使用Vue CLI创建了一个Vue应用程序。我正在努力实现Vuex。我遵循了很多教程(通常设置两种不同的方式)。使用调试器时,我能够在它读取&Vue.use(Vuex)";之前停止。此时,日志记录Vue返回UNDEFINED。我相信我的进口是正确的,但不知道我是否遗漏了一些重要的东西。如有任何帮助,我们将不胜感激。

编辑:尝试1和尝试2之间的唯一区别是我在尝试2上删除了";Vue.use(Vuex)(&q;)。


解决方案

您使用的VUEX 3语法与VUE 3兼容,VUEX 4具有以下语法:

store.js


import { createStore } from 'vuex'

// Create a new store instance.
const store = createStore({
  state: {
    patients: []
  }
})
export default store;

然后在main.js:

中使用导出的存储
import { createApp } from 'vue'
import store from './store/store'
import App from './App.vue'

Vue.config.productionTip = false

const app = createApp(App)

app.use(store)

app.mount('#app')

Vuex 4 docs

Vue.js 3 docs

相关文章