Vue核心概念Action的總結

2019-11-19 12:15:44

字體：大中小

來源：轉載

供稿：網友

Action 類似于mutation，不同在于：

- Action 提交的是mutation，而不是直接變更狀態。

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

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

代碼實例

store.js

  actions: {    // 商品半價    disCount (content) {      // actions中通過commit()提交mutations中的goodsPriceHalve()函數      content.commit('goodsPriceHalve')    },    // 異步的商品半價    /**     * disCountAsync ({commit}){      setTimeout(() => {        commit('goodsPriceHalve')      },1000)    } */    disCountAsync ({commit}){      setTimeout(() => {        commit('goodsPriceHalve')      },1000)    },    // 統一修改商品名字    /* acyionChangeName()的第一個參數可以理解成是一個對象，第二個參數為事件傳遞過來的參數    這個參數也需要傳遞給mutations中相對應的函數中*/    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: {    //  注意這里使用箭頭函數可能會報錯    // 同步商品價格減半;觸發事件提交actions中的disCount()函數     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: {    //  注意這里使用箭頭函數可能會報錯    // 同步修改商品的名字;觸發事件提交actions中的acyionChangeName()函數     acyionChangeName: function(){       this.$store.dispatch('acyionChangeName',this.inpValue)     },     // 異步修改商品的名字;對象 對象中包含兩個屬性type事件函數，payload參數     acyionChangeNameAsync: function(){       this.$store.dispatch({         type:'acyionChangeNameAsync',         payload:this.inpValue       })     },   }  }</script>

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

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

效果圖

代碼執行過程：

上面的Action執行過程是：按鈕點擊亚洲香蕉成人av网站在线观看_欧美精品成人91久久久久久久_久久久久久久久久久亚洲_热久久视久久精品18亚洲精品_国产精自产拍久久久久久_亚洲色图国产精品_91精品国产网站_中文字幕欧美日韩精品_国产精品久久久久久亚洲调教_国产精品久久一区_性夜试看影院91社区_97在线观看视频国产_68精品久久久久久欧美_欧美精品在线观看_国产精品一区二区久久精品_欧美老女人bb