Vue 3 - 如何使用 vuex 模块？

Question

我试图在 vue 3 中使用 vuex 模块。我不确定我做错了什么？

我有 index.js 作为主文件，其余的我打算放在 modules 文件夹中。

当我想调度操作时，我收到一个错误：“[vuex] 未知操作类型：users/registerUser”。

modules file structure

index.js

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

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

Vue 文件中的调度操作

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: {
  }
})

Answer 1

可以创建store.js的文件名 并以这种方式初始化它

 import { createStore } from "vuex" 

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

export default store

vue 3 应用的 main.js 看起来像这样，我们可以通过这两种方式使用商店

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


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

第二种方式

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


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