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.

Iorgo

Ou.. I'e resolved this problem. I had 'vue' instead of 'vue-loader' in webpack. So, *** happens – Iorgo

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

Bossism

I also have the same setup. First it works but after when I ran yarn build I suddenly got the error. Any idea? – Vespid

The Vuex should be imported and Vue.use(vuex) in your store.js file (where the new Vuex() declaration is) and not the app.js file, except if you prefer to layout all your setup in a single file – Pentastyle

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.

Mallard

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

Shape

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

Chorister

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Hominy

This does not really answer the question. If you have a different question, you can ask it by clicking Ask Question. To get notified when this question gets new answers, you can follow this question. Once you have enough reputation, you can also add a bounty to draw more attention to this question. - From Review – Waw

Answer 5

you literally need to add something to the store; a state, module or a getter

Guillen

Answer 6

I create a repositorie: vue-use-vuex to solved this bug.

You can Use it to fixed:

npm install vue-use-vuex --save

add one line code in you entry:

import 'vue-use-vuex'

The error will not be seen.

Standardbearer

This isn't really a solution – Laundryman