快捷導(dǎo)航

Vue核心概念A(yù)ction的總結(jié)

更新時間：2019年01月18日 14:26:34 作者：muzidigbig

今天小編就為大家分享一篇關(guān)于Vue核心概念A(yù)ction的總結(jié)，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧

Action 類似于mutation，不同在于：

- 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

<template>
  <div>
    <h2>我是第五個頁面</h2>
    <div>
      <input type="text" placeholder="請輸入商品的新名字" v-model="inpValue">
      <button @click="disCountPrice()">同步商品價格減半</button>
      <button @click="disCountPriceAsync()">異步商品價格減半</button>
    </div>
    <ul class="ul_list">
      <li v-for="item in goodsListHalv">
        <p class="name">商品：{{item.name}}</p>
        <p class="price">價格：￥{{item.price}}</p>
      </li>
    </ul>
  </div>
</template>
<script>
 export default {
   data() {
    return {
      inpValue:'',
    }
   },
   computed: {
     goodsListHalv(){
       return this.$store.state.goodsList;
     }
   },
   methods: {
    //  注意這里使用箭頭函數(shù)可能會報錯
    // 同步商品價格減半;觸發(fā)事件提交actions中的disCount()函數(shù)
     disCountPrice: function(){
       this.$store.dispatch('disCount')
     },
     // 異步商品價格減半
     disCountPriceAsync: function(){
       this.$store.dispatch('disCountAsync')
     },
   }
  }
</script>

page8.vue

<template>
  <div>
    <h2>我是第六個頁面</h2>
    <div>
      <input type="text" placeholder="請輸入商品的新名字" v-model="inpValue">
      <button @click="acyionChangeName()">載荷修改商品的名字（字符串）</button>
      <button @click="acyionChangeNameAsync()">載荷修改商品的名字（對象）</button>
    </div>
    <ul class="ul_list">
      <li v-for="item in goodsListHalv" :key="item.id">
        <p class="name">商品：{{item.name}}</p>
        <p class="price">價格：￥{{item.price}}</p>
      </li>
    </ul>
  </div>
</template>
<script>
 export default {
   data() {
    return {
      inpValue:'',
    }
   },
   computed: {
     goodsListHalv(){
       return this.$store.state.goodsList;
     }
   },
   methods: {
    //  注意這里使用箭頭函數(shù)可能會報錯
    // 同步修改商品的名字;觸發(fā)事件提交actions中的acyionChangeName()函數(shù)
     acyionChangeName: function(){
       this.$store.dispatch('acyionChangeName',this.inpValue)
     },
     // 異步修改商品的名字;對象 對象中包含兩個屬性type事件函數(shù)，payload參數(shù)
     acyionChangeNameAsync: function(){
       this.$store.dispatch({
         type:'acyionChangeNameAsync',
         payload:this.inpValue
       })
     },
   }
  }
</script>

乍一眼看上去感覺多此一舉，我們直接分發(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)容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對腳本之家的支持。如果你想了解更多相關(guān)內(nèi)容請查看下面相關(guān)鏈接

您可能感興趣的文章: