Vuex 响应式的原理与解决方案
vuex的响应式必须是事先添加到对象中的元素,vuex才会监听响应式变化,如果实现没有添加,那么将不是响应式.如,往一个对象中添加属性时使用state:{obj:{name:"zhangsan",age:"18"}}mutations:{//payload为参数methodName(state,payload){//事先定义好的name这是响应式的state.obj.name = "lisi"//
·
vuex的响应式必须是事先添加到对象中的元素,vuex才会监听响应式变化,如果实现没有添加,那么将不是响应式.
如,往一个对象中添加属性时使用
state:{
obj:{
name:"zhangsan",
age:"18"
}
}
mutations:{
//payload为参数
methodName(state,payload){
//事先定义好的name这是响应式的
state.obj.name = "lisi"
//事先未定义好的address不是响应式的,数据更新页面不会更新
state.obj[address] = "wuhan"
}
}
如果实现响应式解决方案如下:
state:{
obj:{
name:"zhangsan",
age:"18"
}
}
mutations:{
//payload为参数
methodName(state,payload){
//事先定义好的name这是响应式的
state.obj.name = "lisi"
//如下设置就是响应式,如果是数组,后面就是索引 和 值
Vue.set(state.obj,"address","wuhan")
}
}
删除属性也不是响应式
state:{
obj:{
name:"zhangsan",
age:"18"
}
}
mutations:{
//payload为参数
methodName(state,payload){
//如下设置就不是响应式,哪怕是事先定义好的属性
delete state.obj.name
//如下设置是响应式
Vue.delete (state.obj,name)
}
}
更多推荐
已为社区贡献3条内容
所有评论(0)