Vue.js use method of undefined

Question

Currently I am working with Vue CLI version ^3.0.0 and Vuex ^3.6.0, but when I want to use Vue.use(Vuex). It says in the browser cannot read use of undefined.

Code:

main.js

import App from './App.vue'
import store from './store'

new Vue({
    store,
    render: h => h(App)
}).$mount('#app')

Store.js:

import Vue from 'vue';
import Vuex from 'Vuex';

Vue.use(Vuex);

export default Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        increment(state) {
            state.count++
        }
    }
})

Error received:

Uncaught TypeError: Cannot read property 'use' of undefined

Do you guys have any idea?

Thanks in advance.

Answer 1

If you're using Vue 3, it doesn't support global config. You'll need to do it like this I think:

import { createApp } from 'vue';
import { createStore } from 'vuex';

const store = createStore(
  // options
);

const app = createApp(
  // options
);

app.use(store);

Also you will need to upgrade to vuex@4 for Vue 3 support.

Answer 2

Store.js:

import { createStore } from 'vuex'

export default createStore({

state: {...},
mutations: {...},
action: {...},
getters: {...}

})

main.js

import App from './App.vue'
import { createApp } from 'vue'
import store from './store'

createApp(App)    
    .use(store)    
    .mount('#app')

Answer 3

Move

import Vue from 'vue';
import Vuex from 'Vuex';

to main.js since you need to call before its initialize