Recently, I encountered an uncommon issue. I decided to keep my main.js and store.js files separate in a Vue project. In the store.js file, I imported Vuex, set up a new vuex store, and exported it. However, when importing this file into main.js and setting up its requirements (importing Vuex again and using Vue.use(Vuex)), it did not work as expected. I had to add Vue.use(Vuex) inside the store.js file to prevent the error: Error: [vuex] must call Vue.use(Vuex) before creating a store instance.
In the main.js file:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
import App from './App.vue'
import {store} from './store/store.js';
new Vue({
el: '#app',
store: store,
render: h => h(App)
})
And in the store.js file:
import Vuex from "vuex";
export const store = new Vuex.Store({
state: {
counter: 0
}
});
Despite importing
import {store} from './store/store.js';I suspect that the problem may be related to webpack, but I cannot confirm at this time.