我有一個這樣的數據結構,在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[payload.to]){//第一次給對方發消息 第一次建立username屬性
state.msgList[payload.to]=[{
...payload
}];
}else{
state.msgList[payload.to].push({
...payload
})
}
}else{//對方給我方發送消息 存儲接收消息的from作爲username
if(!state.msgList[payload.from]){//第一次給對方發我方消息 第一次建立username屬性
state.msgList[payload.from]=[{
...payload
}];
}else{
state.msgList[payload.from].push({
...payload
})
}
}
state.msgList = Object.assign({}, state.msgList);
//這就是關鍵,將普通不會被檢測到的對象變成可以被檢測到的對象,因爲每次都把源目標給了一個新對象
},
}
在組件裏 這樣寫 用computed 獲得一個響應msgList變化的變量 再在watch中監視這個變量 當這個變量變化時 做一些操作.
computed:{
...mapGetters({ //記得引入vuex
stateMsgList:'GetmsgList' //綁getters時 當msglist變化時 監聽到這個對象的變化,我試着直接綁定state.msgList 但是當msgList變化時 沒有監聽到變化
}),
},
watch:{
stateMsgList:function(val) {
this.getCurrentMsg();//當msgList變化時 更新當前聊天記錄的方法
}
},