?? OK！本節(jié)我們來(lái)學(xué)習(xí)使用Actions，Actions存在的意義是vuex作者假設(shè)你在修改state的時(shí)候有異步操作，作者不希望你將異步操作放在Mutations中，所以就給你設(shè)置了一個(gè)區(qū)域拳氢，讓你放異步操作，你看看作者多么用心良苦啊蛋铆，那既然人家都給我們了馋评，那我們豈能有不用之理？

• ?? 對(duì)于文檔開(kāi)頭的這句話刺啦，我不是很贊同留特，action應(yīng)該是mutation的前一步，怎么是類(lèi)似呢玛瘸？action存在的意義就是執(zhí)行異步操作蜕青，異步操作出結(jié)果后再去commit mutation的，明明是上下級(jí)關(guān)系糊渊，為什么說(shuō)兩者類(lèi)似呢右核？所以不是很贊同。對(duì)于下面兩句話渺绒，我是很贊同的贺喝，action的過(guò)程是執(zhí)行異步操作，其終點(diǎn)就是提交mutation宗兼，能死它也觸碰不到state躏鱼。action就是處在這樣一個(gè)位置。

  
  
  image.png

• ?? 我們?cè)倏匆幌逻@張圖殷绍，action的聲明周期就是上面那一塊染苛，它在組件里被dispatch到，然后進(jìn)入action主到，執(zhí)行異步操作茶行，異步操作(promise)總有一個(gè)結(jié)果的，出結(jié)果后再?zèng)Q定提不提交mutation登钥，應(yīng)該明白啦吧~

image.png

• ?? 我們直接上一個(gè)代碼畔师，show you the code ~
  • 1. 修改store/index.js

  const store = new Vuex.Store({
    state:{
      loading: false,
      todoList : [
        {id:1,name:'11'},
        {id:2,name:'22'},
        {id:3,name:'33'},
      ],
      num: 0,
    },
    mutations:{
      setNumIs5(state){
        state.num = 5
      },
      setNumIsWhat(state,payload){
        state.num = payload.num
      }
    },
    actions:{   <----- 增加actions屬性
      setNum(content){  <----- 增加setNum方法，默認(rèn)第一個(gè)參數(shù)是content怔鳖，其值是復(fù)制的一份store
        return new Promise((resolve)=>{  <----- 返回一個(gè)promise茉唉，我們模擬一個(gè)異步操作，1秒后修改num為5
          setTimeout(()=>{
            content.commit('setNumIs5')
            resolve()
          },1000)
        })
      }
    }
  })
  

  • 2.修改App.vue

    async mounted() {
      console.log('舊值---'+this.$store.state.num);
      await this.$store.dispatch('setNum')   <----- actions使用dispatch進(jìn)行觸發(fā)结执，就像mutation使用commit觸發(fā)一樣
      console.log('新值---'+this.$store.state.num);
    },
  

image.png

• ?? 看了例子度陆，是不是明白了，action就是去commit mutation的献幔，什么異步操作都在action中消化了懂傀，最后再去commit mutation的。

• ?? 當(dāng)然蜡感，你可以模仿mutation進(jìn)行傳參蹬蚁，就像下面這樣

  actions:{
      setNum(content,payload){   <----- 增加payload載荷
        return new Promise((resolve)=>{
          setTimeout(()=>{
            console.log('測(cè)試載荷---'+payload.id);  <----- 測(cè)試載荷輸出
            content.commit('setNumIs5')
            resolve()
          },1000)
        })
     }
    }
  
  await this.$store.dispatch('setNum',{id:111})    <------ App.vue里調(diào)用的時(shí)候加上載荷(傳參)即可
  

  image.png

• ?? 官方建議
  你如果不想一直使用this.$store.dispatch('setNum',{id:111})這樣調(diào)用action，你可以采用mapActions的方式郑兴，解構(gòu)到methods進(jìn)行this直接調(diào)用犀斋。

  methods:{
      ...mapMutations({
        setNumIsWhatAlias:'setNumIsWhat'
      }),
      ...mapActions([   <----- 就像這樣，解構(gòu)到methods中
        'setNum'
      ])
    }
  
  await this.setNum({id:222})   <----- 這樣調(diào)用即可
  

  • 當(dāng)然你可以設(shè)置一個(gè)外號(hào)情连，別名叽粹，就像下面這樣：

  methods:{
      ...mapMutations({
        setNumIsWhatAlias:'setNumIsWhat'
      }),
      ...mapActions({  <----- 取別名
        setNumAlias:'setNum'
      })
    }
  
  await this.setNumAlias({id:222})   <----- 這樣調(diào)用即可
  

• ?? 官方建議2
  在store/index.js中的actions里面，方法的形參可以直接將commit解構(gòu)出來(lái)却舀，這樣可以方便后續(xù)操作虫几。

  actions:{
      setNum({commit},payload){  <----- 直接將content結(jié)構(gòu)掉，解構(gòu)出commit挽拔，下面就可以直接調(diào)用了
        return new Promise((resolve)=>{
          setTimeout(()=>{
            console.log('測(cè)試載荷---'+payload.id);
            commit('setNumIs5')  <----- 直接調(diào)用
            resolve()
          },1000)
        })
      }
    }
  

?? OK辆脸，看到這里，你應(yīng)該明白action在vuex的位置了吧螃诅，什么時(shí)候該用action什么時(shí)候不用它啡氢，你肯定有了自己的判斷，最主要的判斷條件就是我要做的操作是不是異步术裸，這也是action存在的本質(zhì)空执。當(dāng)然，你不要將action和mutation混為一談穗椅，action就是mutation的上一級(jí)辨绊，在action這里處理完異步的一些零碎后，后面的修改state就交給mutation去做了匹表。

?? 好门坷！大致對(duì)vuex的講解就到這里了，看到這里你肯定對(duì)vuex不陌生了袍镀，你會(huì)安裝它默蚌，配置它，讀取state的值苇羡，甚至修飾讀(Getter)绸吸，然后你會(huì)修改里面的值了(Mutation)，假如你有異步操作并且需要修改state，那你就要使用本節(jié)的啦(Action)锦茁，這樣攘轩，你就可以在你的項(xiàng)目中用起來(lái)vuex啦！后面的一些文集是在這個(gè)基礎(chǔ)上進(jìn)行優(yōu)化码俩，如果你是個(gè)優(yōu)雅的程序員兒度帮，請(qǐng)繼續(xù)看下去吧！??