Vuex的核心概念

Vuex的核心概念

State

state提供唯一的公共數(shù)據(jù)源暖眼,所有共享的數(shù)據(jù)都要統(tǒng)一放到StoreState中進(jìn)行存儲鼎天。

store.js

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

組件訪問State中數(shù)據(jù)

第一種方式:

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

第二種方式:

//從vuex中按需導(dǎo)入mapState函數(shù)
import { mapState } from 'vuex'

通過剛才導(dǎo)入的mapState函數(shù)疼蛾,將當(dāng)前組件需要的全局?jǐn)?shù)據(jù)戚宦,映射為當(dāng)前組件的computed計算屬性:

computed:{
  ...mapState(['count'])
}

Mutation

Mutation用于變更Store中的數(shù)據(jù)
1.只能通過mutation變更Store數(shù)據(jù),不可以直接操作Store中的數(shù)據(jù)炭晒。
2.通過這種方式雖然操作起來稍微繁瑣一些待逞,但是可以集中監(jiān)控所有數(shù)據(jù)的變化。

//定義Mutation
const store = new Vuex.Store({
  state: {
    count:0
},
mutations:{
  add(state){
    //變更狀態(tài)
    state.count++
    }
  }
})
//觸發(fā)mutation
methods:{
  hande(){
  //觸發(fā)mutation的第一種方式
  this.$store.commit('add')
    }
  }

可以在觸發(fā)mutations時傳遞參數(shù)

const store = new Vuex.Store({
  state:{
    count:0
},
mutations:{
  addN(state,step){
    // 變更狀態(tài)
    state.count +=step
    }
  }
})
//觸發(fā)mutation
methods:{
  handle2(){
  //在調(diào)用commit函數(shù)
  //觸發(fā)mutations時攜帶參數(shù)
  this.$store.commit('addN',3)
  }
}

this.$store.commit()觸發(fā)mutations的第一種方式网严,觸發(fā)mutations的第二種方式:

//1.從vuex中按需導(dǎo)入mapMutations函數(shù)
import { mapMutations } from 'vuex'

通過剛才導(dǎo)入的mapMutations函數(shù)识樱,將需要的mutations函數(shù),映射為當(dāng)前組件的methods方法:

//2.將指定的mutations函數(shù)震束,映射為當(dāng)前組件的methods函數(shù)
methods:{
  ...mapMutations(['add','addN'])
}

Action

Action用于處理異步任務(wù)
如果通過異步操作變更數(shù)據(jù)怜庸,必須通過Action,而不能使用Mutation垢村,但是Action中還是要通過觸發(fā)Mutation的方式間接變更數(shù)據(jù)割疾。

//定義Action
const store = new Vuex.Store({
  // ...省略其他代碼
mutations:{
  add(state){
    state.count++
  }
},
actions:{
  addAsync(context){
    setTimeout(() =>{
      context.commit('add')
      },1000)
    }
  }
})
//觸發(fā)Action
methods:{
handle(){
  //觸發(fā)actions第一種方式
  this.$store.dispatch('addAsync')
  }
}

觸發(fā)actions異步任務(wù)攜帶參數(shù):

//定義Action
const store = new Vuex.Store({
  //  ...省略其他代碼
  mutations:{
    addN(state,step){
      state.count += step
      }
},
action:{
  addNAsync(context,step){
    setTimeout (() => {
      context.commit('addN',step)
      },1000)
    }
  }
})
//觸發(fā)Action
methods:{
  handle(){
    //在調(diào)用dispatch函數(shù)
    //觸發(fā)actions時攜帶參數(shù)
    this.store.dispatch('addNasync',5)
  }
}

this.$store.dispatch()是觸發(fā)actions的第一種方式,觸發(fā)actions的第二種方式:

//1.從vuex中按需導(dǎo)入mapActions函數(shù)
import { mapActions } from 'vuex'

通過剛才導(dǎo)入的mapActions函數(shù)嘉栓,將需要的actions函數(shù)宏榕,映射為當(dāng)前組件的methods方法:

//2.將制定的actions函數(shù),映射為當(dāng)前組件的methods函數(shù)
methods:{
  ...mapActions(['addASync','addNASync'])
}

Getter

Getter用于對Store中的數(shù)據(jù)進(jìn)行加工處理形成新的數(shù)據(jù)侵佃。
1.Getter可以對Store中已有的數(shù)據(jù)加工處理之后形成新的數(shù)據(jù)担扑,類似Vue的計算屬性。
2.Store中數(shù)據(jù)發(fā)生變化趣钱,Getter的數(shù)據(jù)也會跟著變化涌献。

//
const store = new Vuex.Store({
state:{
  count:0
  },
getters:{
  showNum:state =>{
  return '當(dāng)前最新的數(shù)量是[‘+ state.count +’]'
    }
  }
})

使用getters的第一種方式:

this.$store.getters.名稱

使用getters的第二種方式:

import { mapGetters } from 'vuex'
computed:{
  ...mapGetters(['showNum'])
}
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市首有,隨后出現(xiàn)的幾起案子燕垃,更是在濱河造成了極大的恐慌,老刑警劉巖井联,帶你破解...
    沈念sama閱讀 222,681評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件卜壕,死亡現(xiàn)場離奇詭異,居然都是意外死亡烙常,警方通過查閱死者的電腦和手機轴捎,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評論 3 399
  • 文/潘曉璐 我一進(jìn)店門鹤盒,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人侦副,你說我怎么就攤上這事侦锯。” “怎么了秦驯?”我有些...
    開封第一講書人閱讀 169,421評論 0 362
  • 文/不壞的土叔 我叫張陵尺碰,是天一觀的道長。 經(jīng)常有香客問我译隘,道長亲桥,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,114評論 1 300
  • 正文 為了忘掉前任固耘,我火速辦了婚禮题篷,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘厅目。我一直安慰自己番枚,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 69,116評論 6 398
  • 文/花漫 我一把揭開白布璧瞬。 她就那樣靜靜地躺著,像睡著了一般渐夸。 火紅的嫁衣襯著肌膚如雪嗤锉。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,713評論 1 312
  • 那天墓塌,我揣著相機與錄音瘟忱,去河邊找鬼。 笑死苫幢,一個胖子當(dāng)著我的面吹牛访诱,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播韩肝,決...
    沈念sama閱讀 41,170評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼触菜,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了哀峻?” 一聲冷哼從身側(cè)響起涡相,我...
    開封第一講書人閱讀 40,116評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎剩蟀,沒想到半個月后催蝗,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,651評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡育特,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,714評論 3 342
  • 正文 我和宋清朗相戀三年丙号,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,865評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡犬缨,死狀恐怖喳魏,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情遍尺,我是刑警寧澤截酷,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站乾戏,受9級特大地震影響迂苛,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜鼓择,卻給世界環(huán)境...
    茶點故事閱讀 42,211評論 3 336
  • 文/蒙蒙 一三幻、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧呐能,春花似錦念搬、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至偎漫,卻和暖如春爷恳,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背象踊。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評論 1 274
  • 我被黑心中介騙來泰國打工温亲, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人杯矩。 一個月前我還...
    沈念sama閱讀 49,299評論 3 379
  • 正文 我出身青樓栈虚,卻偏偏與公主長得像,于是被迫代替她去往敵國和親史隆。 傳聞我的和親對象是個殘疾皇子魂务,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,870評論 2 361