M站的開發(fā)還剩下最后2天慧脱，基本只剩下優(yōu)化工作渺绒，但是今天在優(yōu)化點(diǎn)贊功能的時(shí)候出現(xiàn)了個(gè)小問題：
路由：http://mob.gulugulu.cn/forum/:forumId
在項(xiàng)目的store中，有一處列表頁的緩存菱鸥，是根據(jù):forumId為key值,存儲(chǔ)的數(shù)據(jù)宗兼。大致結(jié)構(gòu)如下：
forumsDetailList: {
// eg:單個(gè)G圈列表的詳情
// 11234123131414:{
// sticky:{ //置頂帖
// items:[]
// },
// topics:{ //標(biāo)準(zhǔn)帖
// items:[],
// step:10,
// score:0,
// status:true,
// },
// essence:{ //精華帖
// items:[],
// step:10,
// sinceId:0,
// status:true, //此類型是否還有更多數(shù)據(jù)
// },
// score:0,
// scrollTop : ''
// }
},
這種結(jié)構(gòu)在store初始化的時(shí)候并未顯式聲明出所有key值，所有的key值都是后期通過用戶操作后動(dòng)態(tài)插入的氮采，于是就有一個(gè)問題殷绍，vue在提倡顯式聲明對象，然后將對象轉(zhuǎn)變?yōu)閛bserver對象鹊漠，動(dòng)態(tài)插值會(huì)導(dǎo)致無法將新插入的屬性轉(zhuǎn)變?yōu)閛bserver對象主到，于是后期操作此類數(shù)據(jù)時(shí)會(huì)導(dǎo)致無法刷新視圖茶行。解決思路：將新加入的屬性，通過Obeject.assign()方法合并到已被Vue監(jiān)視的屬性節(jié)點(diǎn)上登钥，即可將新屬性轉(zhuǎn)變?yōu)閛bserver對象
//最初的動(dòng)態(tài)插值方式（無法被監(jiān)視）：
state.forumsDetailList[key] = {}
//后改為(新加入的值可被監(jiān)視)：
state.forumsDetailList[key] = {}
state.forumsDetailList = Object.assign({}, state.forumsDetailList)
//拓展更復(fù)雜的數(shù)據(jù)結(jié)構(gòu)
if(sticky){
state.forumsDetailList[key]['sticky'] = sticky
state.forumsDetailList[key] = Object.assign({}, state.forumsDetailList[key])
}
if(topics){
state.forumsDetailList[key]['topics'] = topics
state.forumsDetailList[key] = Object.assign({}, state.forumsDetailList[key])
}
if(essence){
state.forumsDetailList[key]['essence'] = essence
state.forumsDetailList[key] = Object.assign({}, state.forumsDetailList[key])
}
關(guān)于Object.assign()方法畔师，請?jiān)L問:
MDN Doc
vue 文檔-深入響應(yīng)式原理
