vuex 模块化数据获取vuex4.0

Vuex 是一个专为 Vue.js 应用程序设计的状态管理模式，它提供了一种集中存储和管理应用组件共享状态的方式。在Vuex 4.0中，模块化是核心特性之一，使得状态划分更加清晰，易于管理和维护。

模块化数据获取主要有以下几个步骤：

1. **创建模块**（Modules）：在 Vuex 中，你可以将状态、getter、action 和 mutations 分离到不同的模块（modules）里。每个模块是一个对象，包含了这些状态管理相关的属性。

   export const userModule = {
     state: {
       userName: ''
     },
     getters: {
       getUserInfo: state => state.userName
     },
     actions: {
       setUser: ({ commit }, username) => commit('SET_USER', username)
     },
     mutations: {
       SET_USER: (state, username) => (state.userName = username)
     }
   };

2. **导入模块**：在需要使用模块的地方，通过 `import` 引入，并在 store 中使用 `module.exports` 注册模块。

   import userModule from './modules/user'

   export default new Vuex.Store({
     modules: {
       user: userModule
     }
   })

3. **使用模块**：在组件中通过 `mapState`, `mapGetters`, `mapActions`, 和 `mapMutations` 函数，访问和操作模块内的状态和方法。

   computed: {
     ...mapGetters(['getUserInfo'])
   },
   methods: {
     async updateUser() {
       await this.$store.dispatch('user.setUser', 'New User');
     }
   }

4. **命名空间**：为了防止命名冲突，可以使用命名空间来组织模块，如 `auth` 或 `settings`。

   export const authModule = {
     // ...
   }

   // 在 store 中导入
   import auth from './modules/auth'

   modules: {
     auth: auth,
     // ...
   }