Vuex 与 Redux 更新store过程的比较

Vuex

使用store：

this.$store.state

更新store

异步三步走：

1. store.dispatch(actionFunStr)

2. actionFun({commit}) --> commit(mutationFunStr)

3. mutationFun(state) --> state

同步：

1. store.commit(mutationFunStr)

2. mutationFun(state) --> state

注意点：

• 在入口文件中：new Vue({store: new Vuex.Store(storeObj)})。
  将store分模块分而治之：

  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 的状态

   

• dispatch、commit 方法可以通过 this.$store 获取。
• state、actions、mutations 在 storeObj 中定义。

 

Redux

访问store:  通过视图组件创建时解构

更新store:

1. dispatch(actionObj)

2. reducer(state, actionObj) --> state

注意点：

• 在入口文件中，reducer 通过 redux.createStore(redux.combineReducer(reducerFunMapper)) 注册到 store 中, 其中combineReducer的参数reducerFunMapper是将store分而治之的关键；
• 使用redux.connect 绑定 视图组件(定义的是页面组成部分) 和 容器组件(定义的是数据和交互逻辑，存在dispatch方法调用)，绑定时，视图组件可以访问传入的dispatch参数。

• 

  redux 官方示例图解