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

在Vuex中,如果store中数据是数组或者是对象,操作之后，vuex 数值曾经扭转了,但页面展现的对应数值却没有扭转。

相似的状况，大部分呈现在这几个场景

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


1. 扭转数组的某一项

state.arr[0] = 1;

2. 对象赋值新属性

state.obj.b = 2;

...

导致起因

Vue2 Object.defineProperty的自身的机制问题，拓展https://cn.vuejs.org/v2/guide…

解决方案

优先应用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: {
        
    }
})