相关文章推荐
细心的硬币  ·  Using jQuery ...·  9 月前    · 
酷酷的松鼠  ·  Excel ...·  1 年前    · 
跑龙套的小狗  ·  c++ - ...·  1 年前    · 

Vue2 Object.defineProperty的本身的机制问题,拓展 cn.vuejs.org/v2/guide/re…

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: {