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监听方法。

问题解决。

Logo

前往低代码交流专区

更多推荐