vuex可以集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，當(dāng) Vue 組件從 store 中讀取狀態(tài)的時(shí)候，若 store 中的狀態(tài)發(fā)生變化，那么相應(yīng)的組件也會(huì)相應(yīng)地得到高效更新

但是，最近踩了vuex的坑：

場(chǎng)景

• 第一次進(jìn)入頁(yè)面加載數(shù)據(jù)，數(shù)據(jù)不顯示，點(diǎn)擊某個(gè)按鈕或者切換頁(yè)面后，數(shù)據(jù)會(huì)展示出來(lái)
• 通過(guò)分析發(fā)現(xiàn)，當(dāng)?shù)谝淮渭虞d頁(yè)面的時(shí)候，獲取數(shù)據(jù)的數(shù)據(jù)為{} (空對(duì)象)，當(dāng)數(shù)據(jù)獲取完畢，執(zhí)行commit()
• 而此時(shí)通過(guò)commit()已經(jīng)改變了state中的數(shù)據(jù)，在頁(yè)面中通過(guò)computed也可以獲取更新后的數(shù)據(jù)。但是視圖沒(méi)有更新，獲取的數(shù)據(jù)沒(méi)有展示出來(lái)

解決

• 嘗試在頁(yè)面中發(fā)送commit()來(lái)再次更新視圖，無(wú)效

• 將Vue.set(state, 'myData', data)，無(wú)效

• ......

最終方案：

代碼中所聲明的對(duì)象里面的key是動(dòng)態(tài)的，所以初始只聲明了{(lán) }。

原來(lái)，數(shù)據(jù)是數(shù)組的時(shí)候，不能通過(guò)索引直接進(jìn)行賦值，也不能修改數(shù)組的長(zhǎng)度。 而Vuex只會(huì)跟蹤在對(duì)象創(chuàng)建時(shí)就存在的屬性，新添加到對(duì)象上的新屬性不會(huì)觸發(fā)更新。

并且循環(huán)嵌套層級(jí)太深，視圖也可能不更新

最終，給數(shù)組對(duì)象賦值，這里轉(zhuǎn)化了一下寫(xiě)法，生效。具體如下：

const store = new Vuex.Store({
  state: {
    myData: []
  },
  mutations: {
    setData(state, data) {
      // state.myData = data  不更新視圖
      Vue.set(state, 'myData', JSON.parse(JSON.stringify(data)))
    }
  },
  actions: {
    myFn () {
      store.commit('setData')
    }
  }
})

export default store

如果添加了新的對(duì)象屬性，也可以使用Object.assign()，但必須深拷貝（否則加到對(duì)象上的新屬性不會(huì)觸發(fā)更新）

let someObject = Object.assign({}, someObject, {newField: value}) // 深拷貝
// Object.assign(this.someObject, { key: 1 }) // 淺拷貝

總結(jié)

• 不能直接去改變 store 中的狀態(tài)。改變 store 中的狀態(tài)的需要提交 (commit) mutation
• 在組件中調(diào)用 store 中的狀態(tài)在計(jì)算屬性中返回即可獲取，也可以直接$store.state來(lái)獲取

computed: {
    myData () {
      return store.state.myData
    }
},
mounted() {
    console.log(this.store.state.myData)
}

• 為數(shù)組添加新屬性并不會(huì)觸發(fā)視圖更新，因?yàn)関ue沒(méi)有給新屬性增加get和set監(jiān)聽(tīng)

• 賦值的數(shù)據(jù)，如果循環(huán)嵌套層級(jí)太深，可能會(huì)導(dǎo)致視圖不更新

擴(kuò)展

這些方法操作數(shù)組，vue可以檢測(cè)到數(shù)據(jù)變化：

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

而下面這些不會(huì)改變?cè)瓟?shù)組（返回了新數(shù)組），vue檢測(cè)不到：

filter()
concat()
slice()

到此這篇關(guān)于vuex更新視圖引發(fā)的一些思考的文章就介紹到這了,更多相關(guān)vuex更新視圖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論