mapState、mapGetters、mapMutations、mapActions学习

小半 • 2024年1月15日上午11:15 • 技术随笔 • 阅读 229

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')`
    })
  }
}