当前位置：首页 > vue > 正文内容

VUEX关于 mapActions, mapMutations使用解析

关中浪子4年前 (2021-02-01)vue1436

买泛域名SSL证书送5斤装现摘猕猴桃一箱、同时提供技开源商城搭建免费技术支持。
泛域名ssl证书 239元1年送1个月、单域名39元1年，Sectigo（原Comodo证书）全球可信证书，强大的兼容性，高度安全性,如有问题7天内可退、可开发票
加微信VX 18718058521 备注SSL证书
【腾讯云】2核2G4M云服务器新老同享99元/年，续费同价

在项目中，经常使用到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')`})}}

解析：

1. mapActions 必须放在 methods中，因为 action 或者 mutation 都是方法.

2. mapAction 里面事store 里面的集合，所以使用ES6中解构赋值的方法进行获取我们所需的方法。