Vue 3 - how to use vuex modules?

Question

I was trying to use vuex modules in vue 3. I am not sure what I'm doing wrong?

I have index.js as a main file and rest of them I planed to put in modules folder.

When I want to dispatch action I get an error: "[vuex] unknown action type: users/registerUser".

index.js

import { createStore } from 'vuex'
import users from './modules/users'

export default createStore({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
    users
  }
})

dispatch action in Vue file

const registration = () => {
  store.dispatch('users/registerUser', {
    firstName,
    lastName,
    email,
    password
  })
}

users.js

import { createStore } from 'vuex'

export default createStore({
  namespaced: true,
  state: {
    user: {
      firstName: null,
      lastName: null,
      email: null,
    }
  },
  mutations: {
    UPDATE_FIRST_NAME (state, newValue) {
      state.user.firstName = newValue
    },
    UPDATE_LAST_NAME (state, newValue) {
      state.user.lastName = newValue
    },
    UPDATE_EMAIL (state, newValue) {
      state.user.email = newValue
    }  
  },
  actions: {
    async registerUser ({ commit }, { firstName, lastName, email, password }) {
        const data = {
          firstName,
          lastName,
          email,
          password
        }

        console.log(data)
    }
  },
  modules: {
  }
})

You shouldn't use createStore in modules again. documentation — ibrahimuslu

Eahiya Eahiya · Accepted Answer · 2021-03-07T12:36:34

You can create file name of store.js and initialize it this way

 import { createStore } from "vuex" 

const store = createStore({
   state:{
      name: "Vue"
   }
})

export default store

A vue 3 app's main.js will look like this and we can use the store in this two ways

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


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

And Second way

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


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

Vue 3 - how to use vuex modules?

1 Answers