Jeff Lee

# ❓聊聊 Redux 和 Vuex 的设计思想

# Vuex

  1. 全局单例模式管理，存放全局共享状态
  2. 通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的独立性

  • State 整个应用层面唯一的数据源

  • Getter 就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算

  • Mutation 必须是同步函数，更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。

  • Action 类似于 mutation

    • Action 提交的是 mutation，而不是直接变更状态
    • Action 可以包含任意异步操作
    • Action 通过 store.dispatch 方法触发

  • Module 为了解决但一状态树带来的臃肿复杂问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、 getter、甚至是嵌套子模块——从上至下进行同样方式的分割

    const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23

# Redux

之后整理