Vuex-更新突变中的对象

时间:2020-02-17 08:04:11

标签: javascript vue.js object vuex mutation

用户单击按钮后,我想用本地对象中的数据替换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"
    },
};

1 个答案:

答案 0 :(得分:2)

您不能通过.push更新对象,而必须重新分配对象或设置特定字段。 只需像这样更改代码: 如果要添加键值对,可以执行以下操作:

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

或者,如果您要重新分配对象,可以执行以下操作:

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