mapState、mapGetters、mapMutations、mapActions学习

https://next.vuex.vuejs.org/zh/guide/state.html#mapstate-%E8%BE%85%E5%8A%A9%E5%87%BD%E6%95%B0

https://next.vuex.vuejs.org/zh/guide/getters.html#mapgetters-%E8%BE%85%E5%8A%A9%E5%87%BD%E6%95%B0

mapState和mapGetters都是用于简化开发，提高效率的工具

用法如下：

key（he、xuexiao、xueke）代表了函数名，value代表state中的对象。

注意不要把...mapState放到methods中，这会导致vue将里面的识别成方法，在模板引擎中使用的时候也要加上括号如：{{ he() }}

mapGetters同理。

数组写法（名字要和state中的对象名称一致，也能达到同样效果）：

为什么都放到computed里面？

官方文档解释：由于 Vuex 的状态存储是响应式的，从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态

https://next.vuex.vuejs.org/zh/guide/state.html

https://segmentfault.com/q/1010000009696383

mapMutation：

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation（官方的vuex图也体现了这一点）。

Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type)和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：

官方案例：

import { mapMutations } from 'vuex'

export default {
  // ...
  methods: {
    ...mapMutations([
      'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`

      // `mapMutations` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
    ]),
    ...mapMutations({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
    })
  }
}

要知道的事情：在vue的模板引擎中，写了方法但是开发者没有传参，vue会默认传一个event参数：

所以使用mapMutations时，会出现这种情况：

因为没有传参，所以mapMutations实际生成的代码是这样的：

可以改成这样，因为n在vc上：

也可以不修改模板引擎的内容，这样写也可以，和上面原理是一样的

上面都是对象写法，而数组写法都是相通的，即名字要相同

mapActions同理

注意，这些都是状态共享，不算是组件间通信。

------------恢复内容结束------------