must call Vue.use(Vuex) before creating a store instance

Question

I cant't figure out why I am getting this error. Everything looks properly. Import store to the component like this.

import store from './store';


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

My store looks like this

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

Please any help. Thanks

Uncaught Error: [vuex] must call Vue.use(Vuex) before creating a store instance.

Answer 1

Using Vue CLI and setting up like this works for me

in store/index.js

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

Vue.use(Vuex)

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

in main.js import Vue from '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

I've had a similar problem, and turns out that my modules were returning a Vuex.Store instance instead of a javascript object. My files was like:

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 (Here was my problem)

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

My mistake was that I must have only one store, the root store, the others are modules of root. So I must not instantiate a new store, but return a config object instead. Like so:

my-module/index.js (Corrected version)

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

So, if anyone arrived here with the same problem, I hope it can save you some time.

Answer 3

See https://github.com/vuejs/vuex/tree/dev/examples/shopping-cart for how they do it in their sample app.

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

Answer 4

#katieh Ou.. I'e resolved this problem. I had 'vue' instead of 'vue-loader' in webpack. So, *** happens then i remove vue-loader work well