在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;...导致Vue2Object.defineProperty自身机制问题,展开https://cn.vuejs.org/v2/guide...Vue.js实现基于Object.defineProperty的对象的“响应能力”。对于数组,Vue.js提供的方法是重写push、pop、shift、unshift和splice、sort、reverse这七个数组方法。修改数组原型方法的代码可以参考observer/array.jshttps://github.com/vuejs/vue/...和observer/index.jshttps://github.com/vuejs/vue/。..参考Vue官网。解决方法是先使用Vue.set,使用JSON.parse(JSON.stringify(state.obj)触发对象更新或state.arr.push()触发数组更新;importVuefrom'vue'importVuexfrom'vuex'Vue.use(Vuex)exportdefaultnewVuex.Store({state:{obj:{a:1,},arr:[0,1,2]},mutations:{SET_STATE_DATA(state){//状态.obj.b='233';//错误页面不会被更新//JSON.parse(JSON.stringify(state.obj)//这种方法不推荐触发更新,很LOWBVue。set(state.obj,'b','233')//正确方法//state.arr[0]=233;//错误页面不会被更新//state.arr.push()//这个方法不建议触发更新Vue.set(state.arr,0,233)//正确的方法}},actions:{}})
