关于如何监控vuex里对象的属性变化

最新推荐文章于 2024-12-11 15:00:25 发布

黄冷

最新推荐文章于 2024-12-11 15:00:25 发布

阅读量2.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.csdn.net/crushh_fun/article/details/102860700

本文探讨如何在Vuex中监控并响应msgList对象的属性变化，特别是当用户发送消息时更新对话记录。通过使用Object.assign()方法来确保对象的更新能够被Vuex检测到，从而实现数据的正确响应。在mutations中，使用Object.assign()创建新对象，然后在组件的computed属性中获取响应式msgList，并在watch中监听其变化以执行相应操作。

我有一个这样的数据结构，在store里有一个msgList的对象，属性是用户的username，要在每次这个用户发出一条消息记录时push一个新元素进去，并响应这个变化，同时更新当前对话记录。
在这里插入图片描述
https://cn.vuejs.org/v2/guide/list.html#
这是官方写的对于数组，对象属性更新检测的注意事项。我自己使用了其中的Object.assign()，来实现响应。

Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

官方要求我们用这种写法：

vm.userProfile = Object.assign({}, vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})

是因为如果使用下列这种写法，只是复制了源目标的值，引用地址并没有变化，本质还是属性的修改，无法检测。而上面写法相当于换了一个对象，自然就能检测到。

Object.assign(vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})

预备知识讲完，进入正题。
在mutations里先按照普通写法，将userName作为一个对象的一个属性，并给属性赋值一个被放到数组里的payload对象。

const state={
    msgList:{},//所有消息集合
};
const mutations={
updateMsgList(state,payload){
	console.log(payload)
	if(payload.bySelf===true){//我方发给对方 存储发送消息的To 作为username
		if(!state.msgList[