VUEX中关于 mapActions, mapMutations使用解析

最新推荐文章于 2024-09-09 14:05:23 发布

lyuharvey

最新推荐文章于 2024-09-09 14:05:23 发布

阅读量3.7k

点赞数 1

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5cf9ba856fb9a07ef63fce62

版权

在项目中，经常使用到VUEX状态管理，对于小项目中，直接使用

this.$store.commit('mutaion-name','参数')

或者

this.$store.dispatch('actions-name','参数')

上述两种方法即可。

但是，当项目中的 mutation 或者 action 过多的时候，这样一个个的写就显得比较麻烦。

所以，vue提供了 mapActions和mapMutations 。两者使用方法相似，下面以 mapActions为例。

一、引入 mapActions

import { mapActions } from 'vuex'复制代码

二、进行解构赋值和拓展运算

export default {
  // ...
  methods: {
       //下述中的 ... 是拓展运算符
       // 使用 [] 是解构赋值
    ...mapActions([
      'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`

      // `mapActions` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
    ]),
    ...mapActions({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
    })
  }
}复制代码