Vuex 使用键访问状态中的对象

Question

我在 Vuex 的商店中有这样的代码，如果按照下面的代码执行它就可以了。

state: {
    APIData: {},
},
getters: {
    getFeed: state => {return state.APIData },
},
mutations: {
    SET_FEED_DATA(state, {folder_id, data}) {
        state.APIData = data
    }
},

但是，如果我尝试使用一个键来设置并获取它在 getter 中返回 undefined 的值。我想这样做是因为我的模板中有一个 for 循环多次调用一个操作，但我将在此处使用不同的 id 作为键值。

state: {
    APIData: {},
},
getters: {
    getFeed: state => {return state.APIData["test"] },
},
mutations: {
    SET_FEED_DATA(state, {folder_id, data}) {
        state.APIData["test"] = data
    }
},

编辑

查看 Vue 调试器，我发现以下内容，因此突变似乎正在设置该数据，但 getter 可以访问它。

Answer 1

在突变内部，尝试如下设置：

state.APIData = { ...state.APIData, test: data };

getter 用于APIData，如果您直接更新单个属性，它将无法识别更改。您需要重置整个 APIData 对象。

用变量替换测试：

state.APIData = { ...state.APIData, [VARIABLE_NAME]: data };

例如，如果您想在代码中将密钥名称作为folder_id 传递：

state.APIData = { ...state.APIData, [folder_id]: data };