Vuex 的核心模块有哪些？（State/Mutation/Action/Getter/Module）各自的作用？

1. State (状态)

• 作用：存储应用的全局状态数据。它是 Vuex store 中的“单一状态树”（Single Source of Truth）。
• 特点：
  • 响应式：当 State 中的数据发生变化时，依赖它的 Vue 组件会自动更新。
  • 只读：组件不能直接修改 State，必须通过提交 Mutation 来更改。
• 示例：用户登录信息、购物车商品列表、当前主题色等。

2. Mutation (变更)

• 作用：唯一可以修改 State 的地方。
• 特点：
  • 同步执行：Mutation 必须是同步函数。这是因为 Devtools 需要记录每一步状态变化的快照，如果包含异步操作，将无法追踪状态变化的确切时间点。
  • 触发方式：通过 store.commit('mutationName', payload) 触发。
  • 接收参数：第一个参数是 state，第二个参数是可选的载荷（payload）。
• 示例：SET_USER_INFO, ADD_TO_CART。

3. Action (动作)

• 作用：用于处理业务逻辑，特别是异步操作（如 API 请求、定时器等），然后提交 Mutation 来改变 State。
• 特点：
  • 支持异步：这是 Action 与 Mutation 最大的区别。
  • 不直接修改 State：Action 通过 context.commit 提交 Mutation。
  • 触发方式：通过 store.dispatch('actionName', payload) 触发。
  • 返回 Promise：Action 总是返回一个 Promise，方便进行链式调用或处理复杂流程。
• 示例：fetchUserData (发起网络请求获取用户数据，成功后 commit SET_USER_INFO)。

4. Getter (计算属性)

• 作用：对 Store 中的 State 进行计算、过滤或派生出新数据。类似于 Vue 组件中的 computed 属性。
• 特点：
  • 缓存性：只有当依赖的 State 发生变化时，Getter 才会重新计算，否则直接返回缓存值。
  • 接收参数：第一个参数是 state，第二个参数是其他 getters（允许组合使用）。
• 示例：从商品列表中筛选出“已售罄”的商品，或者计算购物车中商品的总价。

5. Module (模块)

• 作用：将单一的 Store 分割成多个模块，每个模块拥有自己的 State、Mutation、Action、Getter 和嵌套的子模块。
• 特点：
  • 解决代码膨胀：在大型应用中，将所有状态写在一个文件中难以维护，模块化可以让代码结构更清晰。
  • 命名空间 (Namespaced)：默认情况下，模块内部的 getter、action 和 mutation 注册在全局命名空间下。开启 namespaced: true 后，可以通过模块路径访问（如 dispatch('moduleName/actionName')），避免命名冲突。
• 示例：将应用分为 user 模块、cart 模块、product 模块等。

数据流向图解 (单向数据流)

1. Vue Component 派发 Action (dispatch) -> 处理异步逻辑/业务逻辑。
2. Action 提交 Mutation (commit)。
3. Mutation 修改 State。
4. State 变化触发 View (Vue Component) 更新。
5. Getter 随时监听 State 变化并提供计算后的数据给 View。

简单代码示例

1const store = new Vuex.Store({
2  // 1. State
3  state: {
4    count: 0,
5    user: null
6  },
7
8  // 2. Getters
9  getters: {
10    doubleCount: (state) => state.count * 2,
11    isAdmin: (state) => state.user && state.user.role === 'admin'
12  },
13
14  // 3. Mutations (同步)
15  mutations: {
16    increment(state) {
17      state.count++;
18    },
19    setUser(state, user) {
20      state.user = user;
21    }
22  },
23
24  // 4. Actions (异步)
25  actions: {
26    // 模拟异步获取用户
27    fetchUser({ commit }) {
28      return api.getUser().then(user => {
29        commit('setUser', user); // 提交 mutation
30      });
31    },
32    incrementAsync({ commit }) {
33      setTimeout(() => {
34        commit('increment');
35      }, 1000);
36    }
37  },
38
39  // 5. Modules
40  modules: {
41    cart: {
42      namespaced: true,
43      state: { items: [] },
44      mutations: { /* ... */ },
45      actions: { /* ... */ }
46    }
47  }
48});