卜娃娃|Vuex 映射完全指南( 二 )

与映射 state 类似 , 如果你打算使用其他名称 , 则可以把对象传递给 mapGetters 函数 。
import { mapGetters } from 'vuex'export default {computed: {...mapGetters([first:'firstCount',another:'anotherGetter',])}}映射 mutation映射 Mutation 时 , 可以采用以下语法来提交 Mutation 。
this.$store.commit('mutationName`)例如:
import { mapMutations } from 'vuex'export default {methods: {...mapMutations(['search', // 映射 `this.increment()` 到 `this.$store.commit('search')`// `mapMutations` 也支持 payloads:'searchBy' // 映射 `this.incrementBy(amount)` 到 `this.$store.commit('searchBy', amount)`]),...mapMutations({find: 'search' // 映射 `this.add()` 到 `this.$store.commit('search')`})}}映射 action映射 action 与映射 mutation 非常相似 , 因为它也可以在方法中完成 。 使用映射器会把 this.$store.dispatch('actionName') 绑定到映射器数组中的名称或对象的键 。
import { mapActions } from 'vuex'export default {// ...methods: {...mapActions(['increment', // 映射 `this.increment()` 到 `this.$store.dispatch('increment')`// `mapActions` 也支持 payloads:'incrementBy' // 映射 `this.incrementBy(amount)` 到 `this.$store.dispatch('incrementBy', amount)`]),...mapActions({add: 'increment' // 映射 `this.add()` 到 `this.$store.dispatch('increment')`})}}总结看到这里 , 你应该能够学到:

  • 对 Vuex 中的映射是如何工作的以及为什么要使用它有了深刻的了解
  • 能够映射 Vuex store 中的所有组件(state、 getter、 mutation、action)
  • 知道什么时候应该映射 store
作者:前端先锋
【卜娃娃|Vuex 映射完全指南】转发链接:


推荐阅读