必须在创建商店实例之前调用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: { ... },
    ...
})

我的错误是我必须只有一个商店，根商店，其他商店是root的模块。 所以我不能实例化一个新的商店，而是返回一个配置对象。 像这样：

my-module / index.js （更正版）

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

所以，如果有人带着同样的问题来到这里，我希望它可以节省你一些时间。

Answer 3

我创建了一个repositorie： vue-use-vuex来解决这个bug。

您可以使用它来修复：

npm install vue-use-vuex --save

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

import 'vue-use-vuex'

错误将不会出现。

Answer 4

请参阅https://github.com/vuejs/vuex/tree/dev/examples/shopping-cart ，了解他们如何在示例应用中执行此操作。

app.js

import 'babel-polyfill'
import Vue from 'vue'
import App from './components/App.vue'
import store from './store'
import { currency } from './currency'

Vue.filter('currency', currency)

new Vue({
  el: '#app',
  store,
  render: h => h(App)
})

存储/ index.js

import Vue from 'vue'
import Vuex from 'vuex'
import * as actions from './actions'
import * as getters from './getters'
import cart from './modules/cart'
import products from './modules/products'
import createLogger from '../../../src/plugins/logger'

Vue.use(Vuex)

const debug = process.env.NODE_ENV !== 'production'

export default new Vuex.Store({
  actions,
  getters,
  modules: {
    cart,
    products
  },
  strict: debug,
  plugins: debug ? [createLogger()] : []
})