1.State存储应用层的数据状态
//创建一个 store
const store = new Vuex.Store({
//state存储应用层的状态
state:{
count:5 //总数:5
}
});
2.mutations是修改state中数据的唯一途径(actions 处理异步场景,mutations处理同步场景)
const store = new Vuex.Store({
//state存储应用层的状态
state:{
count:5 //总数:5
},
// mutations是修改state中数据的唯一途径
mutations:{
increment(state,value){
state.count += value;
}
}
});
3.修改值(同步):this.$store.commit("increment", 1)
等于
? ? ? ? ? ? ?(异步):?this.$store.dispatch("increment", 1)?;
参数1:increment方法名(修改count值的方法)
参数2:要修改的新值。
4.取值:this.$store.state.count
5.getters:在State和组件之间添加一个环节(对state中的数据进行加工处理后再提供给组件)
// getters的主要应用场景:模板中需要的数据和State中的数据不完全一样
// 需要基于state中的数据进行加工处理,形成一份新的的数据,给模板使用
getters: {
getPartList (state) {
return state.list.filter(item => {
return item.id > 1
})
}
}
this.$store.getters.getPartList
|