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

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

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

要在商店 vue 中添加新数据并使其具有反应性？

谢谢

Answer 1

由于您的密钥最初未在数据中声明，Vue因此无法跟踪更改。您需要使用Vue.set来被动地添加属性，请参阅更改检测警告：

import Vue from 'vue'

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