vuex更新視圖引發的問題怎么解決

本篇內容主要講解“vuex更新視圖引發的問題怎么解決”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“vuex更新視圖引發的問題怎么解決”吧!

場景

• 第一次進入頁面加載數據，數據不顯示，點擊某個按鈕或者切換頁面后，數據會展示出來

• 通過分析發現，當第一次加載頁面的時候，獲取數據的數據為{} (空對象)，當數據獲取完畢，執行commit()

• 而此時通過commit()已經改變了state中的數據，在頁面中通過computed也可以獲取更新后的數據。但是視圖沒有更新，獲取的數據沒有展示出來

解決

• 嘗試在頁面中發送commit()來再次更新視圖，無效

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

• ......

最終方案：

代碼中所聲明的對象里面的key是動態的，所以初始只聲明了{ }。

原來，數據是數組的時候，不能通過索引直接進行賦值，也不能修改數組的長度。 而Vuex只會跟蹤在對象創建時就存在的屬性，新添加到對象上的新屬性不會觸發更新。

并且循環嵌套層級太深，視圖也可能不更新

最終，給數組對象賦值，這里轉化了一下寫法，生效。具體如下：

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

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

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

總結

• 不能直接去改變 store 中的狀態。改變 store 中的狀態的需要提交 (commit) mutation

• 在組件中調用 store 中的狀態在計算屬性中返回即可獲取，也可以直接$store.state來獲取

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

• 為數組添加新屬性并不會觸發視圖更新，因為vue沒有給新屬性增加get和set監聽

• 賦值的數據，如果循環嵌套層級太深，可能會導致視圖不更新

擴展

這些方法操作數組，vue可以檢測到數據變化：

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

而下面這些不會改變原數組（返回了新數組），vue檢測不到：

filter()
concat()
slice()

到此，相信大家對“vuex更新視圖引發的問題怎么解決”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！