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

33次阅读

共计 688 个字符，预计需要花费 2 分钟才能阅读完成。

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

正文完