当多个组件共享同一份数据时，props 和 EventBus 开始力不从心。Vuex 提供了集中式的状态管理方案。

一、什么是状态管理

  • 1.1 组件内部状态 vs 应用级状态
  • 1.2 多组件共享数据的痛点
  • 1.3 Vuex 的解决思路——单一数据源

二、核心概念

  • 2.1 State——单一状态树
  • 2.2 Getter——计算属性
  • 2.3 Mutation——同步修改 State
  • 2.4 Action——异步操作后提交 Mutation
  • 2.5 Module——模块化拆分

三、一个购物车示例

  • 3.1 定义 State——商品列表、购物车
  • 3.2 Mutation——添加/删除商品
  • 3.3 Action——异步获取商品数据
  • 3.4 组件中使用 mapState / mapActions

四、Vuex 的使用原则

  • 4.1 不要在 Mutation 中做异步操作
  • 4.2 表单处理——v-model 与 Vuex 的结合
  • 4.3 什么数据该放 Vuex——一个判断标准