前端Wiki/词条/Vuex 状态管理

Vuex 状态管理

定义Vue 2 时代的官方全局状态管理库，把跨组件共享的数据收进单一 store 统一管理

当多个不相关的组件要读写同一份数据、或兄弟组件间来回传递时，props 与事件链会演化成蜘蛛网。Vuex 的思路是把这份数据搬进一个全局 store：state 存数据、mutations 同步改、actions 处理异步、getters 派生计算，所有变更经过显式通道，方便追踪与调试。

在 Vue 3 时代官方推荐转用 Pinia：API 更简洁、没有 mutations 的双层结构、TypeScript 支持更好，且可以按模块天然拆分多 store。新项目不建议再上 Vuex，但大量存量项目仍在运行，理解它的 store 结构对维护旧代码必不可少。

state 存数据，mutations 同步修改，actions 装异步逻辑，边界要清晰
Vue 3 新项目应选 Pinia，Vuex 主要用于维护 Vue 2 存量项目
不是所有数据都要进 store，只属于单个组件的状态留在本地

JavaScript

// Vuex 四件套的最小形态（框架思想演示）
var store = {
  state: { count: 0 },
  mutations: {
    increment: function (s, n) { s.count += n; }     // 同步修改
  },
  actions: {
    incrementAsync: function (ctx, n) {
      setTimeout(function () { ctx.commit('increment', n); }, 300); // 异步提交
    }
  },
  getters: {
    double: function (s) { return s.count * 2; }     // 派生计算
  }
};
// 组件里只能 commit mutation，不能直接改 state，保证变更可追踪
store.state.count;        // 0
store.mutations.increment(store.state, 5);
store.state.count;        // 5

⚠ 常见误区

组件里直接改 store.state，绕过 mutation，时间线调试失效
图省事把所有状态都塞进全局 store，简单页面变得复杂
在 mutation 里写异步代码，DevTools 序列化时序错乱

🔗 相关词条状态管理 Pinia