Vuex - 更新突变中的对象答案

【问题标题】：Vuex - update object in mutationVuex - 更新突变中的对象
【发布时间】：2020-06-01 03:09:28
【问题描述】：

用户单击按钮后，我想用本地对象中的数据替换我的 vuex 存储中的数据。但我被困在突变中。这是一些代码以了解更多详细信息。

这是用户单击按钮后调用的方法。（this.tableview是一个本地对象，与vuex对象具有相同的值）

            updateVuexTableview() {
                // eslint-disable-next-line no-console
                console.log("Update Vuex Table view");
                this.updateTableview(this.tableview)
            }

在这个方法中我的 vuex 动作被调用。看起来像这样：（updTableview 是我要插入的新数据）

async updateTableview({commit}, updTableview) {
        const response = await axios.put(
            `http://localhost:3000/tableview`,
            updTableview
        );

        // eslint-disable-next-line no-console
        console.log(response.data);

        commit('updateTableviewMut', response.data);
    },

这是被调用的突变。这就是我卡住的地方。我试图弹出数据并再次推送它，但到目前为止没有任何效果。

    updateTableviewMut: (state, updTableview) => {
        state.tableview.push(updTableview)
    },

这就是我的状态：

const state = {
    tableview: {
        "thema_c": true,
        "status_c": true,
        "priority_c": true,
        "custom1_c": true,
        "custom2_c": true,
        "customFieldName1": "Custom1",
        "customFieldName2": "Custom2"
    },
};

【问题讨论】：

state.tableview 不是一个数组，它是一个对象，所以你不能在上面使用.push
所以你可以到达updateTableviewMut ?
是的，突变被调用。我知道如何更新数组元素而不是对象。
你不能像这样更新一个对象，你可以像这样更新一个对象，state.tableview['keyname'] = updTableview 你必须给那个项目一个键名。您还可以更新您的updTableview 的外观吗
非常感谢伙计！ state.tableview = updTableview 为我工作。没想到这么简单。

标签： javascript vue.js object vuex mutation

【解决方案1】：

您无法通过.push 更新对象，您必须重新分配对象或设置特定字段。只需像这样更改您的代码：如果你想添加一个键值对，你可以这样做：

updateTableviewMut: (state, updTableview) => {
  state.tableview['keyname'] = updTableview
}

或者如果你想重新分配一个对象，你可以这样做：

updateTableviewMut: (state, updTableview) => {
  state.tableview = updTableview
}

【讨论】：