Action 類似于mutation，不同在于：

創(chuàng)新互聯(lián)是專業(yè)的貢山網(wǎng)站建設(shè)公司，貢山接單;提供成都網(wǎng)站制作、做網(wǎng)站,網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進行貢山網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!

- Action 提交的是mutation，而不是直接變更狀態(tài)。

- Action 可以包含任意異步操作。

Action 函數(shù)接受一個與 store 實例具有相同方法和屬性的 context 對象，因此你可以調(diào)用 context.commit 提交一個 mutation，或者通過 context.state 和 context.getters 來獲取 state 和 getters。當我們在之后介紹到 Modules 時，你就知道 context 對象為什么不是 store 實例本身了。

代碼實例

store.js

  actions: {
    // 商品半價
    disCount (content) {
      // actions中通過commit()提交mutations中的goodsPriceHalve()函數(shù)
      content.commit('goodsPriceHalve')
    },
    // 異步的商品半價
    /**
     * disCountAsync ({commit}){
      setTimeout(() => {
        commit('goodsPriceHalve')
      },1000)
    } */
    disCountAsync ({commit}){
      setTimeout(() => {
        commit('goodsPriceHalve')
      },1000)
    },
    // 統(tǒng)一修改商品名字
    /* acyionChangeName()的第一個參數(shù)可以理解成是一個對象，第二個參數(shù)為事件傳遞過來的參數(shù)
    這個參數(shù)也需要傳遞給mutations中相對應(yīng)的函數(shù)中*/
    acyionChangeName(content,payload){
      // 載荷形式
      content.commit('changeName',payload);
    },
    acyionChangeNameAsync (content,payload){
      setTimeout(() => {
        // 對象形式
        content.commit('changeName',payload.payload)
      },1000)
    }
  }

這里有同步也有異步，有載荷也有沒有載荷。

page7.vue

page8.vue

乍一眼看上去感覺多此一舉，我們直接分發(fā) mutation 豈不更方便？實際上并非如此，還記得 mutation 必須同步執(zhí)行這個限制么？Action 就不受約束！我們可以在 action 內(nèi)部執(zhí)行異步操作。

Actions 支持同樣的載荷方式和對象方式進行分發(fā)。

效果圖

代碼執(zhí)行過程：

上面的Action執(zhí)行過程是：按鈕點擊–>執(zhí)行按鈕點擊事件方法–>執(zhí)行$store.dispatch('avtions中的對應(yīng)的函數(shù)名',參數(shù))–>執(zhí)行actions里面對應(yīng)的方法–>執(zhí)行mutations里面對應(yīng)的方法–>修改state里面對應(yīng)的數(shù)據(jù)–>頁面渲染。

小結(jié)：

在Mutation中我們組件調(diào)用方法使用的是commit，在Action中組件使用的卻是dispatch分發(fā)?？催^vue1.x文檔的，可能對commit和dispatch就有點感覺了，或者你看過socket。

這里主要要明白以下幾點：

1.Mutation是同步的，Action是異步的；

2.Mutation是直接變更狀態(tài)，Action提交的是mutation；

3.Actions和Mutation 都支持載荷方式和對象方式進行分發(fā)。

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，謝謝大家對創(chuàng)新互聯(lián)的支持。如果你想了解更多相關(guān)內(nèi)容請查看下面相關(guān)鏈接