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

#vuex中更新对象或数组的值页面不更新的问题| 来源: 网络整理| 查看: 265

(vue3没有此问题)在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的本身的机制问题，拓展深入响应式原理 — Vue.js

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

【本文地址】

公司简介

联系我们