vuex中更新对象或数组的值页面不更新的问题

Posted 2021-09-13 天渺工作室

在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...

Vue.js是基于Object.defineProperty对对象实现“响应式化”，而对于数组，Vue.js提供的方法是重写push、pop、shift、unshift、splice、sort、reverse这七个数组方法。修改数组原型方法的代码可以参考
observer/array.js https://github.com/vuejs/vue/...
以及
observer/index.js https://github.com/vuejs/vue/...

参考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: {
        
    }
})