必须在创建商店实例之前调用Vue.use(Vuex)

Question

我无法弄清楚为什么我会收到这个错误.一切看起来都很合适.像这样将商店导入组件.

import store from './store';


new Vue({
    components: {
     SomeComponent
    },
    store
});

我的商店看起来像这样

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

import * as getters from './getters';
import * as actions from './actions';
import mutations from './mutations';

Vue.use(Vuex);

export default new Vuex.Store({
    state: {
       something
    }
})

请帮忙.谢谢

未捕获错误:[vuex]必须在创建商店实例之前调用Vue.use(Vuex).

Answer 1

使用Vue CLI和这样的设置对我有用

在store/index.js中

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    something: ['something']
  }
})

在main.js中从'vue'导入Vue

import App from './App'
import router from './router'
import store from './store'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App }
})

Answer 2

我遇到了类似的问题，结果发现我的模块返回的是Vuex.Store实例而不是javascript对象。我的文件就像：

app.js

import Vue from 'vue'
...
import store from './store'
...

商店/index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import myModule from './my-module'
...
export default new Vuex.Store({
    modules: { myModule }
    ....
})

my-module / index.js（这是我的问题）

import Vuex from 'vuex'
...
export default new Vuex.Store({
    namespaced: true,
    state: { ... },
    ...
})

我的错误是我必须只有一个存储，即根存储，其他存储是根模块。因此，我不能实例化新存储，而应返回一个配置对象。像这样：

my-module / index.js（正确的版本）

...
export default {
    namespaced: true,
    state: { ... },
    ...
}

因此，如果有人遇到同样的问题，我希望它可以节省您一些时间。

Answer 3

我创建了一个存储库：vue-use-vuex来解决这个错误。

您可以用它来修复：

npm install vue-use-vuex --save

在您的条目中添加一行代码：

import 'vue-use-vuex'

该错误将不会被看到。