Object(…) is not a function for Vuex Store

I’m in Vue 3, I started with adding a new Vuex.Store to vue, but I continuously get this javascript error. I also tried the same thing with createStore since I use Vue 3, but it’s still the same.

What am I missing?

const store = new Vuex.Store({
    modules: {
    account: {
    namespaced: true,
    state: () => ({  }), 
    getters: {
        isAdmin () {  } 
    },
    actions: {
        login () {  } 
    },
    mutations: {
        login () {  } 
    }
 }}
});

Than I add to Vue as store:

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

What am I missing?

Complete error

vuex.esm-browser.js?5502:644 Uncaught TypeError: Object(...) is not a function
at resetStoreState (vuex.esm-browser.js?5502:644)
at new Store (vuex.esm-browser.js?5502:387)
at createStore (vuex.esm-browser.js?5502:337)
at eval (main.js?56d7:37)
at Module../src/main.js (app.js:1105)
at __webpack_require__ (app.js:849)
at fn (app.js:151)
at Object.1 (app.js:1118)
at __webpack_require__ (app.js:849)
at checkDeferredModules (app.js:46)

Answer

If you are using Vue 3 you need to use Vuex 4.

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

const store = createStore({
  state () {
    return {
      count: 1
    }
  }
})

const app = createApp({ /* your root component */ })
app.use(store)

https://vuex.vuejs.org/guide/#vuex-4-x-for-vue-3

Advertisement

Answer