Vue 3 - 如何使用 vuex 模块？

Question

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

我将 index.js 作为主文件，其余的我计划将其放入模块文件夹中。

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

模块文件结构

索引.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
  })
}

用户.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')