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++;
    }
};

每次我更改或添加新值时，它看起来就像是一种反应性。

但是，有没有一种方法可以在没有“默认”变量和这个愚蠢的技巧的情况下做到这一点？

要在 store vue 中添加新数据并使其具有响应性？

谢谢

Answer 1

由于您的密钥最初未在数据中声明，Vue 无法跟踪更改。您需要使用Vue.set 响应式添加属性，请参阅change detection caveats：

import Vue from 'vue'

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