Vue教程22：mapState、mapActions、mapGetters

阅读更多系列文章请访问个人GitHub博客，示例代码请访问这里。

该节教程代码可经过npm start运行devServer，在http://localhost:8080/查看效果

map映射函数

map映射函数	映射结果
mapState	将state映射到computed
mapActions	将actions映射到methods
mapGetters	将getters映射到computed

mapState的使用

代码示例：/lesson21/src/components/Index.vue

首先须要引入map函数：

import { mapState, mapActions, mapGetters } from 'vuex'
复制代码

在computed中使用mapState：

computed: {
  ...mapState(['a', 'b']),
}
复制代码

就能够代替这段代码：

computed: {
  a() {
    return this.$store.state.a
  },
  b() {
    return this.$store.state.b
  },
}
复制代码

mapActions的使用

代码示例：/lesson21/src/components/Index.vue

在methods中添加addA和addB的映射

methods: {
  ...mapActions(['addA', 'addB']),
},
复制代码

等价于：

methods: {
  addA(n) {
    this.$store.dispatch('addA', n)
  },
  addB(n) {
    this.$store.dispatch('addA', n)
  },
}
复制代码

mapGetters的使用

代码示例：/lesson21/src/components/Index.vue

在computed中添加count的映射：

computed: {
  ...mapGetters(['count'])
}
复制代码

等价于：

computed: {
  count() {
    return this.$store.getters.count
  }
}
复制代码