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



我不知道为什么会出现此错误。一切看起来都很好。 像这样将存储导入组件。

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(。

使用 Vue CLI 并像这样设置对我有用

在商店/索引中.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    something: ['something']
  }
})

主要.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 }
})

我遇到了类似的问题,结果我的模块返回了一个 Vuex.Store 实例而不是一个javascript对象。 我的文件是这样的:

应用.js

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

存储/索引.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的模块。所以我不能实例化一个新的存储,而是返回一个配置对象。这样:

我的模块/索引.js(更正版本(

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

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

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

应用.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)
})

存储/索引.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()] : []
})

#katieh 呜我解决了这个问题。我在 webpack 中有"vue"而不是"vue-loader"。所以,*** 发生然后我删除 vue 加载器工作得很好

你实际上需要向商店添加一些东西;一个状态,模块或一个getter

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

您可以使用它来修复:

npm install vue-use-vuex --save

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

import 'vue-use-vuex'

不会看到错误。

最新更新