关于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: {            }})