淺談vuex之mutation和action的基本使用

2019-11-19 15:38:42

字體：大中小

供稿：網(wǎng)友

我們要實(shí)現(xiàn)的很簡單，就是點(diǎn)擊+1的count加一，點(diǎn)擊-1的時(shí)候count-1

一、mutation

在vue 中，只有mutation 才能改變state. mutation 類似事件，每一個(gè)mutation都有一個(gè)類型和一個(gè)處理函數(shù)，因?yàn)橹挥衜utation 才能改變state, 所以處理函數(shù)自動(dòng)會獲得一個(gè)默認(rèn)參數(shù) state. 所謂的類型其實(shí)就是名字，action去commit 一個(gè)mutation, 它要指定去commit哪個(gè)mutation, 所以mutation至少需要一個(gè)名字，commit mutation 之后，要做什么事情，那就需要給它指定一個(gè)處理函數(shù)，類型(名字) + 處理函數(shù)就構(gòu)成了mutation. 現(xiàn)在test.js添加mutation.

const store = new Vuex.Store({  state: {    count:0  },  mutations: {    // 加1    increment(state) {      state.count++;    },    // 減1    decrement(state) {      state.count--    }  }})

Vue 建議我們mutation 類型用大寫常量表示，修改一下，把mutation 類型改為大寫

mutations: {    // 加1    INCREMENT(state) {      state.count++;    },    // 減1    DECREMENT(state) {      state.count--    }  }

二、action

action去commit mutations, 所以還要定義action. test.js 里面添加actions.

const store = new Vuex.Store({  state: {    count:0  },  mutations: {    // 加1    INCREMENT(state) {      state.count++;    },    // 減1    DECREMENT(state) {      state.count--    }  },  actions: {    increment(context) {      context.commit("INCREMENT");    },    decrement(context) {      context.commit("DECREMENT");    }  }})

action 和mutions 的定義方法是類似的，我們要dispatch 一個(gè)action, 所以actions 肯定有一個(gè)名字，dispatch action 之后它要做事情，就是commit mutation, 所以還要給它指定一個(gè)函數(shù)。因?yàn)橐猚ommit mutation ,所以函數(shù)也會自動(dòng)獲得一個(gè)默認(rèn)參數(shù)context, 它是一個(gè)store 實(shí)例，通過它可以獲取到store 實(shí)例的屬性和方法,如 context.state 就會獲取到 state 屬性， context.commit 就會執(zhí)行commit命令。

其實(shí)actions 還可以簡寫一下，因?yàn)楹瘮?shù)的參數(shù)是一個(gè)對象，函數(shù)中用的是對象中一個(gè)方法，我們可以通過對象的解構(gòu)賦值直接獲取到該方法。修改一下 actions

actions: {    increment({commit}){      commit("INCREMENT")    },    decrement({commit}){      commit("DECREMENT")    }  }

三、dispatch action

現(xiàn)在就剩下dispatch action 了。什么時(shí)候dispatch action 呢？只有當(dāng)我們點(diǎn)擊按鈕的時(shí)候. 給按鈕添加click 事件,在click 事件處理函數(shù)的中dispatch action.

這個(gè)時(shí)候我們需要新建一個(gè)操作組件，我們暫且命名為test.vue

<template> <div>  <div>    <button @click="add">+1</button>    <button @click="decrement">-1</button>  </div> </div></template>

然后，我們在methods里面獲取這兩個(gè)操作事件

<script>  export default {    methods: {      increment(){        this.$store.dispatch("increment");      },      decrement() {        this.$store.dispatch("decrement")      }    }  }</script>

當(dāng)然上面這種寫法比較麻煩，vuex還給我我們提供了mapActions這個(gè)函數(shù)，它和mapState 是一樣的，把我們的 action 直接映射到store 里面的action中。

<script>　　　 import {mapActions} from 'vuex'  export default {    methods: {      ...mapActions(['increment', 'decrement'])    }  }</script>

如果事件處理函數(shù)名字和action的名字不同，給mapActions

提供一個(gè)對象，對象的屬性是事件處理函數(shù)名字, 屬性值是對應(yīng)的dispatch 的action 的名字。

<script>import {mapActions} from 'vuex'export default { methods: {  // 這中寫法雖然可行，但是比較麻煩  // 這時(shí)vue 提供了mapAction 函數(shù)，  // 它和mapState 是一樣的，把我們的 action 直接映射到store 里面的action中。  // increment () {  //  this.$store.dispatch('increment')  // },  // decrement () {  //  this.$store.dispatch('decrement')  // }  // 下面我們使用一種比較簡潔的寫法  // ...mapActions(['increment', 'decrement'])  /**   如果事件處理函數(shù)名字和action的名字不同，給mapActions   提供一個(gè)對象，對象的屬性是事件處理函數(shù)名字, 屬性值是 對應(yīng)的dispatch 的action 的名字。  */  // 這里實(shí)際是為了改變事件的名字  ...mapActions(['decrement']),  ...mapActions({   add: 'increment'  }) }}</script>

這時(shí)候我們單擊按鈕，就可以看到count 發(fā)生變化。

最后附一張簡單的圖形解析，看起來應(yīng)該能更直觀一點(diǎn)