Vue的Flux框架之Vuex状态管理器

上面也可以写作：

computed: mapGetters([
   'doneTodosCount',
   'anotherGetter',
   // ...
  ])

所以在Vue的computed计算属性中会存在两种辅助函数：

import { mapState, mapGetters } from 'vuex';
export default {
  // ...
  computed: {
    ...mapGetters([ ... ]),
    ...mapState([ ... ])
  }
}

Mutations

之前也说过了，更改Vuex的store中的状态的唯一方法就是mutations。

每一个mutation都有一个事件类型type和一个回调函数handler。

调用mutation，需要通过store.commit方法调用mutation type：

store.commit('increment')

Payload 提交载荷

也可以向store.commit传入第二参数，也就是mutation的payload:

mutaion: {
  increment (state, n) {
    state.count += n;
  }
}
store.commit('increment', 10);

单单传入一个n，可能并不能满足我们的业务需要，这时候我们可以选择传入一个payload对象：

mutation: {
  increment (state, payload) {
    state.totalPrice += payload.price + payload.count;
  }
}
store.commit({
  type: 'increment',
  price: 10,
  count: 8
})

mapMutations函数

不例外，mutations也有映射函数mapMutations，帮助我们简化代码，使用mapMutations辅助函数将组件中的methods映射为store.commit调用。

import { mapMutations } from 'vuex'
export default {
 // ...
 methods: {
  ...mapMutations([
   'increment' // 映射 this.increment() 为 this.$store.commit('increment')
  ]),
  ...mapMutations({
   add: 'increment' // 映射 this.add() 为 this.$store.commit('increment')
  })
 }
}

Actions

注 Mutations必须是同步函数。

如果我们需要异步操作和提交多个Mutations，Mutations就不能满足我们需求了，这时候我们就需要Actions了。

Actions

Action 类似于 mutation，不同在于：

Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。

让我们来注册一个简单的 action：

var store = new Vuex.Store({
 state: {
  count: 0
 },
 mutations: {
  increment: function(state) {
   state.count++;
  }
 },
 actions: {
  increment: function(store) {
   store.commit('increment');
  }
 }
});