开发者问题收集

Vue.use() 抛出“无法读取未定义的属性‘use’”

2020-12-16
17203
vue.js vuex vuejs3 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。我遵循了许多教程（通常设置 2 种不同的方式）。使用调试器时，我能够在它读取“Vue.use(Vuex)”之前停止。此时记录 Vue 返回未定义。我相信我的导入是正确的，但不知道我是否遗漏了某些关键内容。任何帮助都非常感谢。

编辑： 尝试 1 和 2 之间的唯一区别是我在尝试 2 中删除了“Vue.use(Vuex)”。

2个回答

您正在使用 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 文档

Vue.js 3 文档

Boussadjra Brahim
2020-12-16

我可以通过卸载我的 VueX (3.6) 

npm uninstall vuex

并安装 VueX (4.0 alpha) 

npm i [email protected]

来实现此目的。出现此错误的原因是因为我使用了不同版本的两种不同语法方法。

感谢大家的帮助！

ma​​in.js 

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

const app = createApp(App)

app.use(store)

app.mount('#app')

store.js 

import { createStore } from 'vuex'

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

export default store;
Charlie Bandstra
2020-12-16