javascript - 向 Vuex 存储对象添加新属性

Question

我有这个初始状态：

state: {
    alertsByQuestionId: {
        // <questionId>: {
        //     <alertId>: false
        // }
    }
}

当用户单击此问题的警报时，我需要将警报添加到现有状态对象。所以在突变中我这样做：

Vue.set(state.alertsByQuestionId, 22, {1 : false} );

所以它向状态添加了一个属性，我有：

state.alertsByQuestionId: {22: {1: false}}

但是当我点击另一个警报时，状态被第二个警报替换，但第一个消失了。所以当我这样做时： Vue.set(state.alertsByQuestionId, 22, {2 : false} );

我得到： state.alertsByQuestionId: {22: {2: false}}

但我需要的是： state.alertsByQuestionId: {22: {1:false, 2: false}}

我究竟做错了什么？

标签： javascriptvue.jsvuex

Answer 1

您正在用新对象覆盖旧对象。相反，您应该保存旧副本的副本，修改其值并将其设置回如下：

var alertsByQuestionId = {
      22: {1:false}
};
let key = Object.keys(alertsByQuestionId)[0];
console.log(alertsByQuestionId);
alertsByQuestionId[key][2] = false;
console.log(alertsByQuestionId);