创建store实例前必须调用Vue.use(Vuex)

Question

我不明白为什么会出现这个错误，所有东西看起来都没问题。像这样将 store 导入到组件中。

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
    }
})

未捕获的错误：在创建store实例之前必须调用Vue.use(Vuex)。

- katieh

---

哦..我解决了这个问题。在webpack中我写成了'vue'而不是'vue-loader'。所以就发生了 ***。 - katieh

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文件中，使用import语句从“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 }
})

- user3765825

---

我也有同样的设置。一开始可以运行，但是在我运行了 yarn build 后突然出错了。有什么想法吗？ - jofftiquez

Vuex 应该在 store.js 文件中导入并使用 Vue.use(vuex)（在 new Vuex() 声明处），而不是在 app.js 文件中，除非您更喜欢将所有设置放在一个文件中布局。 - Oniya Daniel

Answer 2

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

app.js

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

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: { ... },
    ...
}

所以，如果有人因为相同的问题到这里来，我希望这篇文章能为你节省一些时间。

- fernandosavio

Answer 3

你需要在 store 中添加一些东西：状态、模块或者 getter。

- Gabriel soft

Answer 4

#katieh 哦，我解决了这个问题。在webpack中，我使用了'vue'而不是'vue-loader'。所以，当我移除vue-loader时就好了。

- ramu k

---

您的答案目前写得不清晰。请[编辑]以添加更多细节，帮助其他用户理解如何回答问题。您可以在帮助中心中找到有关编写良好答案的更多信息。 - Community

这并没有真正回答问题。如果您有不同的问题，可以通过点击提问来提出。如果您想在此问题获得新的答案时得到通知，您可以关注此问题。一旦您拥有足够的声望，您还可以添加悬赏以吸引更多关注。- 来自审核 - Ethan McTague

Answer 5

请参考他们的示例应用程序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)
})

store/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()] : []
})

- Adam Zerner

Answer 6

我创建了一个仓库：vue-use-vuex 来解决这个 bug。 你可以使用它来修复：

npm install vue-use-vuex --save

在你的入口处添加一行代码：

import 'vue-use-vuex'

错误将不会被看到。

- hezedu

---

这并不是一个真正的解决方案。 - robertmain