1.State定義：State提供唯一的公共源，所有共享的數(shù)據(jù)都要統(tǒng)一放 到Store的State中進(jìn)行存儲(chǔ)

2.Mutation定義：用于變更Store的數(shù)據(jù)
3.Action定義：用于處理異步任務(wù)
4.Getter定義：用于對(duì)Store中數(shù)據(jù)進(jìn)行加工處理成新的數(shù)據(jù)

State的用法

//創(chuàng)建store 的數(shù)據(jù)源，提供唯一公共數(shù)據(jù)
const store =new Vuex.Store({
 State:{ count: 0 }
})

組件訪問State中數(shù)據(jù)的第一種方式：

   this.$store.state.全局?jǐn)?shù)據(jù)名稱

在state中添加count數(shù)據(jù)

在這里插入圖片描述

在這里插入圖片描述

在這里插入圖片描述

在這里插入圖片描述

const store = new Vuex.Store({
  state:{
    count: 0
  },
  mutations:{
   add(state){
    state.count++
  }
 }
})

在組件中用commit方法直接調(diào)用

methods:{
 handlel(){
  this.$store.commit("add)
 }
}

Action用法（用于處理異步操作）

const store = new Vuex.Store({
  state:{
    count: 0
  },
  mutations:{
   add(state){
    state.count++
  }
  actions:{
  //用commit調(diào)用mutations里的方法
  addAsync(context){
     setTimeout(()=>{
   context.commit("add)
   }，1000)
  }
   }
})

在組件里觸發(fā)

methods：{
  handel(){
   //觸發(fā)actions
   this.$store.dispatch("addAsync)
  }
}

Getter的使用

const store - new Vuex.Store({
 state:{
     count:0
  },
  getters:{
   showNum:state=>{
    return '當(dāng)前的最新數(shù)據(jù)是【'+ state.count+'】'
  }
  }
})

在組件中觸發(fā)
方法1
[圖片上傳失敗...(image-f5c8ab-1598980188291)]
方法2

在這里插入圖片描述

相關(guān)內(nèi)容請(qǐng)瀏覽《普歌-智音團(tuán)隊(duì) javascript-DOM重點(diǎn)總結(jié)》

作者：lihaijin8090
本文源自：lihaijin8090的《普歌-智音團(tuán)隊(duì) vuex里State，Mutation，Action，Getter的使用》
本文版權(quán)歸作者和CSDN共有，歡迎轉(zhuǎn)載，且在文章頁(yè)面明顯位置給出原文鏈接，未經(jīng)作者同意必須保留此段聲明，否則保留追究法律責(zé)任的權(quán)利。