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
  }
}
複製代碼