Добавить новое свойство в объект магазина 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}}

Что я делаю не так?

Answer 1

Вы перезаписываете старый объект новым. Вместо этого вы должны сохранить копию старого, изменить его значение и установить его обратно следующим образом:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var alertsByQuestionId = {
      22: {1:false}
};
let key = Object.keys(alertsByQuestionId)[0];
console.log(alertsByQuestionId);
alertsByQuestionId[key][2] = false;
console.log(alertsByQuestionId);