一.mutations
1.1mutations的理解
mutations在某种意义上相当于methods，是处理数据逻辑方法的集合。使得视图和模型相分离，因此我们将getters视为store的methods属性
2.1标准写法
const store = new Vuex.Store({
state:{
counter:0
}
mutations:{
increasement(state){
store.counter++
}
}
})
与之对应的代码为:
<h3>{{$store.state.counter}}</h3>
<button @click="addtion">++</button>
export default{
methods:{
addtion(){
this.$store.commit('increasement')
}
}
}
2.2传参写法
const store = new Vuex.Store({
state:{
counter:0
}
getters:{
increasementFive(state，count){
store.counter+=count
}
}
})
与之对应的代码为:
<h3>{{$store.state.counter}}</h3>
<button @click="addtionFive">+5</button>
export default{
methods:{
addtionFive(){
this.$store.commit('increasementFive'，5)
}
}
}
二.getters
1.1getters的理解
getters在某种意义上相当于computed，是用于对数据的初级加工并缓存后的集合。因此我们将getters视为store的computed属性
2.1标准写法
const store = new Vuex.Store({
state:{
students:[
{id:100,name:"Melody",age:21},
{id:110,name:"Cris",age:11},
{id:120,name:"Koke",age:35}
]
}
getters:{
adults(state){
return state.students.filter(student => student.age>=18)
}
}
})
与之对应的代码为:
<h3>{{$store.getters.adult}}</h3>
<button @click="addStudent">++</button>
2.2传参写法
const store = new Vuex.Store({
state:{
students:[
{id:100,name:"Melody",age:21},
{id:110,name:"Cris",age:11},
{id:120,name:"Koke",age:35}
]
}
getters:{
adults(state){
return function(age){
return state.students.filter(student => student.age>=age)
}
}
}
})
与之对应的代码为:
<h3>{{$store.getters.adult(18)}}</h3>
------这里是前端小白Melody_Fish的学习记录，若有不对的地方，还望各位大佬指正。
