在項目中，經常使用到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中解構賦值的方法進行獲取我們所需的方法。

• 解構賦值不太了解的，點擊這里: juejin.im/post/5c02b1…

3. mapAction 前面的 ( ... ) 是ES6中 拓展運算符，對我們所需的方法從數組中拓展出來。

• 數組拓展運算符不太了解的，點擊這里:juejin.im/post/5c02b1…

4. ES6對象中同名屬性可以簡寫。

• 對象簡寫不太了解的，點擊這里:juejin.im/post/5c02b1…

5. 也可以自己命名不同函數名來映射 action方法

轉載于:https://juejin.im/post/5cf9ba856fb9a07ef63fce62

總結

以上是生活随笔為你收集整理的VUEX中关于 mapActions, mapMutations使用解析的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。