一、vuex之store
1?vuex 定義
管理狀態(tài) + 共享數(shù)據(jù) ，在各個(gè)組件間管理外部狀態(tài)
2?使用
a、引入vuex晕讲，并通過use方法使用它
b、創(chuàng)建狀態(tài)倉(cāng)庫
c马澈、通過this.$store.state.xxx 直接拿到需要的數(shù)據(jù)
//創(chuàng)建狀態(tài)倉(cāng)庫瓢省，切記 Store(首字母一定要大寫)，state 不能改
var store = new Vuex.Store({
state:{
XXX:xxx //XXX是方法名
}
})
// 直接通過 this.$store.state.XXX 拿到 全局狀態(tài)
二痊班、vuex 狀態(tài)管理流程
1?狀態(tài)管理流程
view ——-> actions ——-> mutations ——-> state ——-> view
三步曲：
a勤婚、首先視圖接收到信號(hào)，走actions
b涤伐、走完actions之后馒胆，才會(huì)走mutations
c、通過mutations來直接操作 state 凝果，改變狀態(tài)
小總結(jié)
mutations直接操作state祝迂，actions操作mutations
其中在這過程中actions 是可有可無的
如果有actions，先actions器净，然后mutations
如果沒有actions型雳，直接mutations，但是有異步操作，必須走actions
2?改變狀態(tài)
//創(chuàng)建狀態(tài)倉(cāng)庫纠俭，切記 Store(首字母一定要大寫)沿量，state 不能改
var store = new Store({
state:{
XXX:xxx //XXX是方法名
},
mutations:{
.....
}
})
this.$store.commit(XXX) //此處的XXX是你在mucations中定義的方法名
var store = new Vuex.Store({
state:{// state 是 存放定義的狀態(tài)
num:88 //定義的狀態(tài)
},
mutations:{//改變定義的狀態(tài)
increase:function(state){
state.num++
},
decrease(state){//es6寫法
state.num-=20
}
},
actions:{ //context為上下文對(duì)象
decreaseAction:function(context){
context.commit('decrease')
//actions中只能對(duì)mutation進(jìn)行操作
//也就是說，decrease一定是 mutations中定義的冤荆，才可以使用
//異步操作一定要寫在action中
// setTimeout(() => {
// context.commit('decrease')
// }, 1000);
}
},
getters:{
getNum(state){
return state.num > 0 ? state.num : 0
}
}
})
3?如何調(diào)用
export default {
name: 'parent',
data:function(){
return {
toSonMsg: '我是你的父親',
fromSonMsg:''
}
},
components:{
son
},
methods:{
getMsgFromSon:function(value){
this.fromSonMsg = value
},
padd(){
this.$store.commit('increase')
},
paddaction(){
this.$store.dispatch('decreaseAction')
}
},
computed:{
getCount:function(){
// return this.$store.state.num
return this.$store.getters.getNum
}
}
}
4? mutations VS actions
a朴则、 接收的參數(shù)不一樣
? mutations的參數(shù)：state （可以直接傳狀態(tài)）
? actions 的參數(shù)：context（只能是上下文對(duì)象）
b、 調(diào)用的方法不一樣
? mutations：this.$store.commit('XXX')
? actions：this.$store.dispatch('XXX')
c钓简、里面包含的函數(shù)要求不一樣
? actions：可以包含異步操作
? mutations：只能包含同步操作
