vuex中mutation和action如何使用，針對(duì)這個(gè)問(wèn)題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問(wèn)題的小伙伴找到更簡(jiǎn)單易行的方法。

專(zhuān)注于為中小企業(yè)提供成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)崇左免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上千多家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

一、mutation

在vue 中，只有mutation 才能改變state.  mutation 類(lèi)似事件，每一個(gè)mutation都有一個(gè)類(lèi)型和一個(gè)處理函數(shù)，因?yàn)橹挥衜utation 才能改變state, 所以處理函數(shù)自動(dòng)會(huì)獲得一個(gè)默認(rèn)參數(shù) state. 所謂的類(lèi)型其實(shí)就是名字，action去commit 一個(gè)mutation, 它要指定去commit哪個(gè)mutation, 所以mutation至少需要一個(gè)名字，commit mutation 之后， 要做什么事情，那就需要給它指定一個(gè)處理函數(shù)， 類(lèi)型(名字) + 處理函數(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 類(lèi)型用大寫(xiě)常量表示，修改一下，把mutation 類(lèi)型改為大寫(xiě)

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

其實(shí)actions 還可以簡(jiǎn)寫(xiě)一下， 因?yàn)楹瘮?shù)的參數(shù)是一個(gè)對(duì)象，函數(shù)中用的是對(duì)象中一個(gè)方法，我們可以通過(guò)對(duì)象的解構(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>

然后，我們?cè)趍ethods里面獲取這兩個(gè)操作事件

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

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

<script>

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

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

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

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

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

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

關(guān)于vuex中mutation和action如何使用問(wèn)題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒(méi)有解開(kāi)，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識(shí)。

分享標(biāo)題：vuex中mutation和action如何使用
文章位置：http://chinadenli.net/article48/godeep.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)、Google、網(wǎng)站營(yíng)銷(xiāo)、品牌網(wǎng)站建設(shè)、商城網(wǎng)站、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)