Vuex and dynamic states. Is possible?

Question

I have a store in Vuex with an empty state

const state = {
    data: {

    }
};

And a simple mutations for test to change value or add new data

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

If I do a commit to changeOrAdd, it is added to state BUT it doesn't have reactivity.

I did a simple trick to change a default value

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

And in the mutation:

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

And everytime I change or add a new value, it looks like a reactivity.

But, exists a way to do this without a "default" variable and without this stupid trick?

To add a new data in store vue and make it with reactivity?

Thanks

Psidom Psidom · Accepted Answer · 2019-02-21T16:28:46

Since your keys initially are not declared in data, Vue can't track the changes. You need to use Vue.set to reactively add properties, see change detection caveats:

import Vue from 'vue'

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

Vuex and dynamic states. Is possible?

1 Answers