vue中使用watch监听对象,监听方法没有被触发的原因
watch: {friendList:{//注意,这里是对象handler(val){},deep:true}},computed:mapGetters({friendList:'getFriendList'}),mounted(){this.$store.dispatch('editFriendList', hy.friendList);}下面是vuex中,mutations的内容:EDIT_F
·
watch: {
friendList:{ //注意,这里是对象
handler(val){
},
deep:true
}
},
computed:mapGetters({
friendList:'getFriendList'
}),
mounted(){
this.$store.dispatch('editFriendList', hy.friendList);
}
下面是vuex中,mutations的内容:
EDIT_FRIEND_LIST (state, data) {
if(!data){
return
}
for(var key in data){
state.myFriend[key] = data[key]
}
},
如上代码,原本预期效果是:当dispatch方法执行完,通过vuex修改了state内容,然后vue页面的friendList会发生改变,从而触发watch。但实际项目中,此watch监听friendList,有可能不会被调用,也就是watch没有触发。
找了比较久问题,原因如下:
this.$store.dispatch('editFriendList', hy.friendList);
//这里的 hy.friendList和watch中的friendList,
//可能被其它代码关联到同一引用,它们的属性一致,
//或者是包含与被包含的关系,所以,在mutations修改的时候:
for(var key in data){
state.myFriend[key] = data[key]
}
//这里的赋值其实并没有实际上对目标对象进行覆盖修改
//因此不会引发watch对friend的监听。
故,修改如下:
//mounted的:
this.$store.dispatch('editFriendList', hy.friendList);
//改成
this.$store.dispatch('editMyFriendList', {...hy.friendList});
//这里用结构赋值,重新传入的是新的对象
//mutations中:
for(var key in data){
state.myFriend[key] = data[key]
}
//改成
state.myFriend = {...state.myFriend, ...data};
//同样用结构合并对象,组成新的对象,再赋值给state
这样子,每次通过vuex的广告dispatch方法修改state,都会触发watch监听方法。
问题解决。
更多推荐
已为社区贡献4条内容
所有评论(0)