Is it good practice to store the axios response error in axios store and handle it within the component?

Question

I am planing to execute all server CRUDing transmissions via vuex by axios. like:

actions: { // dispatch
    createCategory(ctx) {
        return axios.post(process.env.API_URL + "category/create/", category)
            .then(response => {
                ctx.commit('UPDATE_CATEGORY', response.data.updated_category);
                return response;
            }).catch(error => {
                return error;
            })
...

and then call them within component like

this.$store.dispatch("createCategory", category)
    .then(response => { DO NOTIFICATION STUFF }  
    .catch(error => { this.errors = error }

(I probably will need a promise and reject() within the axios for catching error but that's not the point)

My question is should I handle the error this way (component) locally or should I handle it globally with a vuex state like

actions: { // dispatch
    createCategory(ctx) {
        return axios.post(process.env.API_URL + "category/create/", category)
            .then(response => {
                ctx.commit('UPDATE_CATEGORY', response.data.updated_category);
                return response;
            }).catch(error => {
                ctx.commit('SET_ERROR', error)
            })
...

and call the errors within the component like: this.$store.getters['getErrors'] ?

(the examples here are kinda abstract just for explanation purpose)

So which way is better practice handle error locally within component or globally within vuex store?

Answer 1

Unless you are planning to share the error state with multiple different component, I would handle the error locally within component.

I generally avoid using Vuex if I don't have to because it adds a lot of overhead. My rule of thumb of using Vuex is:

• Only use Vuex if the state is going to be accessed by multiple unrelated component
• Only use Vuex if the state is accessed by a component that is not a direct children of the related parent component

Check out this "Should I store this data in Vuex" decision tree

Other thing to consider is what do you use Vuex for, is it a component state management, or a data state management.

If you treat Vuex as a data state management (state for specific data and can be accessed any component), then it makes more sense to handle the error locally within component.

If you treat Vuex as a component state management (state for specific component / page and will not accessed by other component), then it make sense to handle it globally / on the store since all of the state will be specific for that particular component, but I personally will still handle it locally unless I need to share the state to non-direct child component. I often see this being applied on some vue app

In addition to that, I also prefer how to code look like if I handle the error locally:

try {
    store.doSomething();
catch (err) {
    console.log("Failed to execute doSomething()");
}

which looks more familiar than:

store.doSomething();

if (store.err) {
    console.log("Failed to execute doSomething()");
}