Vuex是什么？有哪些核心概念？

Vuex是Vue.js官方提供的状态管理模式+库。它用于管理应用中多个组件共享的状态，并以一种可预测的方式确保状态的变更。当你的应用变得复杂，组件之间需要频繁传递和同步数据时，Vuex提供了一个集中式的存储方案，让状态变化变得清晰、可追踪。

Vuex的核心概念

理解Vuex的关键在于掌握其五个核心部分：State、Getters、Mutations、Actions和Modules。它们共同构成了一个单向数据流。

State：单一状态树

State是Vuex存储应用状态的唯一数据源，是一个单一对象。你可以将它理解为整个应用的“数据库”。

// store/index.js
import { createStore } from 'vuex';
const store = createStore({
  state: {
    count: 0,
    user: null
  }
});

在组件中，可以通过this.$store.state.count（选项式API）或useStore()（组合式API）来访问状态。

Getters：派生的状态

Getters可以看作是store的计算属性。它们用于从state中派生出一些新的状态，例如对列表进行过滤或计数。Getter的返回值会根据它的依赖被缓存起来。

const store = createStore({
  state: {
    todos: [
      { id: 1, done: true },
      { id: 2, done: false }
    ]
  },
  getters: {
    doneTodos(state) {
      return state.todos.filter(todo => todo.done);
    }
  }
});

Mutations：同步更改状态的唯一途径

Mutations是更改Vuex中state的唯一方法。每个mutation都有一个字符串类型的事件类型和一个回调函数。这个回调函数就是实际进行状态更改的地方，并且它必须是同步的。

const store = createStore({
  state: { count: 1 },
  mutations: {
    increment(state) {
      state.count++;
    },
    incrementBy(state, payload) {
      state.count += payload.amount;
    }
  }
});

你不能直接调用一个mutation，而需要通过store.commit方法来触发，例如store.commit('increment')或store.commit('incrementBy', { amount: 10 })。

Actions：处理异步操作

Actions类似于mutations，但有两点不同：1）Action提交的是mutation，而不是直接变更状态；2）Action可以包含任意异步操作。

const store = createStore({
  state: { count: 0 },
  mutations: {
    increment(state) { state.count++; }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    }
  }
});

Action通过store.dispatch方法触发：store.dispatch('incrementAsync')。

Modules：模块化分割

当应用状态非常复杂时，store对象会变得臃肿。Vuex允许你将store分割成多个模块。每个模块拥有自己的state、mutations、actions、getters，甚至是嵌套子模块。

const moduleA = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... }
};
const store = createStore({
  modules: {
    a: moduleA
  }
});

Vuex通过这套规则（视图触发Action -> Action提交Mutation -> Mutation改变State -> 状态更新驱动视图），强制实施了状态变更的清晰路径。对于中大型Vue项目，它是管理共享状态的基石。对于新项目，Vuex的继承者Pinia也是更现代的选择，它提供了类似的模式但API更简洁。