I came across this scenario today, and would like to know the best approach to handling it.

The Vuex action uses Axios to post a record to the back end, catching any exceptions. Once the POST request returns, a mutator is called with the returned data. The issue is if an exception occurs in the mutator, it is not caught by error handling in the action, or the calling component.

Example If the spread operator within the mutation is removed, an "object expected, got array" exception would be thrown, which I would expect to be caught within the .catch() function of the action call within the component, but it is not. Why and how can this be handled? If the solution to wrap the action call in an additional try/catch?

Action

async saveRecords({ commit }, records) {
        return new Promise((resolve, reject) => {
            axios.post("/records", records)
                .then((res) => {
                    commit('addRecords', res.data.records)
                    resolve();
                })
                .catch((error) => {
                    reject(error);
                })
        })
    }

Mutation

addCase: function (state, caseRecord) {
    console.log("inside mutation")
    state.cases.push(...caseRecord) 
},

Component

this.saveRecords(records)
    .catch((e) => {
          // IExpecting exception from mutation to be caught here
        })
      });