Vuex - update object in mutation

Question

After the user clicks a button I want to replace the data in my vuex store with the data from my local object. But I am stuck at the mutation. Here is some code for more details.

This is the method that is called after the user clicks a button. (this.tableview is a local object with the same values as the vuex object)

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

In this method my vuex action is called. Which looks like this: (updTableview is the new data that I want to insert)

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);
    },

This is the mutation that is called. That's where I am stuck. I have tried to pop the data and push it again, but nothing works so far.

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

This right here is my state:

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

Answer 1

You cannot update an object by .push you have to reassign object or set a specific field. Just change your code like this: If you want to add a key value pair you can do:

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

Or if you want to reassign an object you can do:

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