Vuex и динамические состояния.Возможно?

Question

У меня есть магазин в Vuex с пустым состоянием

const state = {
    data: {

    }
};

И простые мутации для проверки изменения значения или добавления новых данных

const mutations = {
    changeOrAdd(state, {key,value}) {
        state.data[key] = value;
    }
};

Если я сделаю коммит вchangeOrAdd, он добавляется в состояние, НО не имеет реактивности.

Я сделал простой трюк, чтобы изменить значение по умолчанию

const state = {
    data: {
        change: 0
    }
};

И в мутации:

const mutations = {
    changeValueAttr(state, {
        key,
        value
    }) {
        state.data[key] = value;
        state.data.change++;
    }
};

И каждый раз, когда я меняю или добавляю новое значение, это выглядит как реактивность.

Но существует ли способ сделать это без переменной «по умолчанию» и без этой глупой уловки?

Чтобы добавить новые данные в хранилище и сделать их с реактивностью?

Спасибо

Answer 1

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

import Vue from 'vue'

const mutations = {
    changeOrAdd(state, {key, value}) {
        Vue.set(state.data, key, value)
    }
}