Vuex 映射完全指南( 二 )

现在可以通过简单地调用 userDetails 来引用 user 。
何时映射整个 state根据经验,仅当 state 中有大量数据,并且组件中全部需要它们时,才应该映射 。
在上面的例子中,如果我们只需要一个值(例如 username),则映射整个用户对象就没有多大意义 。
在映射时,整个对象将会全部加载到内存中 。实际上我们并不想继续把不需要的数据加载到内存中,因为这将是多余的,并且从长远来看会影响性能 。
映射 getter映射 getter 的语法与 mapState 函数相似 。
import { mapGetters } from 'vuex'export default {  computed: {    ...mapGetters([      'firstCount',      'anotherGetter',    ])  }}与映射 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
作者:前端先锋
转发链接:https://mp.weixin.qq.com/s/1sl21P0AHPlbFEq4_Q7hVQ




推荐阅读