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.
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).
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");
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.
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 }
})
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With