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.

If you setup vue with vue-cli you can run: vue add vuex and it'll do all the work — Asimple
– Asimple, Commented Feb 16, 2021 at 14:52

Hannah · Accepted Answer · 2021-02-16 14:53:35Z

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.

answered Feb 16, 2021 at 14:53

Hannah

1,1436 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user11461061 Over a year ago

I been looking for Vuex version 4, but didnt see any version of npm install, can you maybe send a link?

Hannah Over a year ago

Try npm install vuex@next

user11461061 Over a year ago

npm install [email protected]?

user11461061 Over a year ago

I have installed your version, but now it doesn't show any result, but it doesnt give any error

Oleksii · Accepted Answer · 2021-02-16 15:06:26Z

0

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

answered Feb 16, 2021 at 15:06

Oleksii

2,7613 gold badges10 silver badges22 bronze badges

1 Comment

user11461061 Over a year ago

And how can I use those state? Can I use it like ReactJS like this.state.name

shalini · Accepted Answer · 2021-02-16 14:48:36Z

0

Move

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

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

answered Feb 16, 2021 at 14:48

shalini

1,30011 silver badges13 bronze badges

Collectives™ on Stack Overflow

Vue.js use method of undefined

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related