vuex中更新對象或數組的值頁面不更新的問題

在Vuex中,如果store中數據是數組或者是對象,操作之后，vuex 數值已經改變了,但頁面展示的對應數值卻沒有改變。

類似的情況，大部分出現在這幾個場景

state: {
        obj: {
            a:1,
        }, 
        arr: [0,1,2]
}


1. 改變數組的某一項

state.arr[0] = 1;

2. 對象賦值新屬性

state.obj.b = 2;

3.修改數組長度時

state.arr.length = 1;

...

 

導致原因

Vue2 Object.defineProperty的本身的機制問題，拓展https://cn.vuejs.org/v2/guide/reactivity.html#%E5%A6%82%E4%BD%95%E8%BF%BD%E8%B8%AA%E5%8F%98%E5%8C%96

Vue.js是基於Object.defineProperty對對象實現“響應式化”，而對於數組，Vue.js提供的方法是重寫push、pop、shift、unshift、splice、sort、reverse這七個數組方法。修改數組原型方法的代碼可以參考observer/array.js以及observer/index.js。

參考Vue官網。

解決方案

優先使用Vue.set，使用JSON.parse(JSON.stringify(state.obj)觸發對象更新 或者 state.arr.push() 觸發數組更新 也可以；

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
     state: {
        obj: {
            a:1,
        }, 
        arr: [0,1,2]
    },
    mutations: {
        SET_STATE_DATA(state){
            // state.obj.b= '233'; // 錯誤 頁面不會更新 
            // JSON.parse(JSON.stringify(state.obj) //不推薦此方法觸發更新 顯得很LOWB
            Vue.set(state.obj,'b','233') // 正確的方法

            // state.arr[0] = 233; // 錯誤 頁面不會更新
            // state.arr.push() //不推薦此方法觸發更新
            Vue.set(state.arr,0,233) // 正確的方法
        }
    },
    actions: {
        
    }
})