vue.js - Vuex 使用键访问状态中的对象

Question

我在 Vuex 的商店中有这样的代码，如果像下面的代码那样做，它就可以正常工作。

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

但是，如果我尝试使用一个键来设置并获取它undefined在 getter 中返回的值。我想这样做是因为我的模板中有一个 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 可以访问它。

标签： vue.jsvuex

Answer 1

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

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

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

用变量替换测试：

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

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

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