state->单一状态树(单一数据源)
使用一个store去存储数据属性
getters类似于computed,用于获取state中变异后的状态
bigger(){
return this.$store.state.persons.filter((item)=>{
return item.age>=20;
});//多看看这个!!
<!-- 定义自己传参的getters方法!!! -->
moreit(state){
return (age1)=>{
return state.persons.filter((item)=>{return item.age>age1})
};
};//通过返回一个函数来实现
mutations -> 类似于methods,但是有很多细节不同
响应式传值到state
vuex中(getters):
addp(state,stu){
state.persons.push(stu);
}
App中(methods):
addperson() {//传值到state
const p1 = { age: 22, name: "Ak47" };
//这叫做payload,负载,就意思是带东西传值
this.$store.commit("addp",p1);//提交(vuex中getters函数,传入对象)
},
Mutation标准提交风格: this.$store.commit("addp");
this.$store.commit({//特殊风格提交
type:'add',
})
这种风格适合添加载荷payload!!!
cha(state){
state.name1.name='M4A1';
state.name1['age1']=21;//定义新属性!!!
setTimeout(() => {
// delete state.name1.age1;//不知道为啥这个没用
Vue.delete(state.name1,'age1');//响应式的!!!
console.log(123);
}, 2000);
}
Mutation要求同步!,异步方法要写在action中
actions:{//替代Mutation进行异步操作(细节有所不同)
aup(context){
setTimeout(() => {
context.commit('add');//不能跳过 mutations!!!!
//actions只是在中间加了一步!!!
}, 1000);
}
},
vueaboutAXIOS
最新推荐文章于 2024-04-09 22:48:33 发布