面试题：Vuex 有哪几种属性？分别有什么作用？

Vuex 是一个专为 Vue.js 设计的状态管理库，它通过一些核心属性来管理应用的状态。以下是 Vuex 的几种主要属性及其作用：

1. State

作用：
- state 是 Vuex 中存储应用状态的地方，类似于组件中的 data。
- 它是响应式的，当 state 发生变化时，依赖它的组件会自动更新。
示例：
```
state: {
  count: 0,
  user: null
}
```
访问方式：
- 在组件中通过 this.$store.state 访问。
- 使用 mapState 辅助函数将 state 映射到组件的计算属性中。

2. Getters

作用：
- getters 用于从 state 中派生出一些状态，类似于组件中的 computed。
- 可以对 state 进行计算、过滤或格式化。

示例：

getters: {
  doubleCount(state) {
    return state.count * 2;
  },
  loggedIn(state) {
    return !!state.user;
  }
}

访问方式：
- 在组件中通过 this.$store.getters 访问。
- 使用 mapGetters 辅助函数将 getters 映射到组件的计算属性中。

3. Mutations

作用：
- mutations 是唯一可以修改 state 的方式。
- 每个 mutation 都有一个字符串类型的事件类型（type）和一个回调函数（handler），回调函数接收 state 作为第一个参数。
- mutations 必须是同步的，以确保状态变化是可追踪的。

示例：

mutations: {
  increment(state) {
    state.count++;
  },
  setUser(state, user) {
    state.user = user;
  }
}

调用方式：
- 在组件中通过 this.$store.commit('mutationName', payload) 调用。
- 使用 mapMutations 辅助函数将 mutations 映射到组件的方法中。

4. Actions

作用：
- actions 用于处理异步操作或复杂的业务逻辑。
- 不能直接修改 state，而是通过提交 mutation 来间接修改状态。
- actions 可以包含任意异步操作（如 API 请求、定时器等）。

示例：

actions: {
  incrementAsync({ commit }) {
    setTimeout(() => {
      commit('increment');
    }, 1000);
  },
  fetchUser({ commit }, userId) {
    api.getUser(userId).then(user => {
      commit('setUser', user);
    });
  }
}

调用方式：
- 在组件中通过 this.$store.dispatch('actionName', payload) 调用。
- 使用 mapActions 辅助函数将 actions 映射到组件的方法中。

5. Modules

作用：
- modules 用于将 Vuex 的 state、getters、mutations 和 actions 分割到不同的模块中，便于大型应用的状态管理。
- 每个模块都有自己的 state、getters、mutations 和 actions，甚至可以嵌套子模块。

示例：

const userModule = {
  state: () => ({
    user: null
  }),
  mutations: {
    setUser(state, user) {
      state.user = user;
    }
  },
  actions: {
    fetchUser({ commit }, userId) {
      api.getUser(userId).then(user => {
        commit('setUser', user);
      });
    }
  }
};

const store = new Vuex.Store({
  modules: {
    user: userModule
  }
});

访问方式：
- 在组件中通过 this.$store.state.moduleName 访问模块的 state。
- getters、mutations 和 actions 默认注册在全局命名空间，可以通过命名空间（namespaced: true）隔离。

6. 命名空间（Namespaced）

作用：
- 在模块中设置 namespaced: true，可以将模块的 getters、mutations 和 actions 隔离到模块的命名空间中，避免命名冲突。

示例：

const userModule = {
  namespaced: true,
  state: () => ({
    user: null
  }),
  mutations: {
    setUser(state, user) {
      state.user = user;
    }
  },
  actions: {
    fetchUser({ commit }, userId) {
      api.getUser(userId).then(user => {
        commit('setUser', user);
      });
    }
  }
};

调用方式：
- 在组件中通过 this.$store.dispatch('moduleName/actionName') 调用。

总结

属性	作用
State	存储应用的状态，响应式数据。
Getters	从 `state` 中派生出一些状态，类似于计算属性。
Mutations	唯一可以修改 `state` 的方式，必须是同步的。
Actions	处理异步操作或复杂逻辑，通过提交 `mutation` 修改状态。
Modules	将状态管理分割到不同的模块中，便于大型应用的管理。
Namespaced	隔离模块的 `getters`、`mutations` 和 `actions`，避免命名冲突。

THE END