Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 441
katieh Avatar asked Jun 30 '17 09:06

katieh


People also ask

When we should use Vuex?

The number one use case for storing data in a centralized store like Vuex, is, because the data must be accessible in multiple places of your application, by components which oftentimes are not related in any way (they neither are parents or children of each other).

How do you use Vuex in Vue 3?

Adding Vuex to your Vue 3 Project import { createApp } from "vue";import { createStore } from "vuex";// Create a new store instance or import from module. const store = createStore({ /* state, actions, mutations */});const app = createApp();app. use(store);app. mount("#app");

What is $store in Vue?

A "store" is basically a container that holds your application state. There are two things that make a Vuex store different from a plain global object: Vuex stores are reactive. When Vue components retrieve state from it, they will reactively and efficiently update if the store's state changes.


2 Answers

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 }
})
like image 189
user3765825 Avatar answered Sep 21 '22 07:09

user3765825


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.

like image 30
fernandosavio Avatar answered Sep 20 '22 07:09

fernandosavio