Is it good practice to use Vuex store actions to perform related asynchronous operations (e.g., GET requests) without actually modifying the state of the store?

I have a Vuex store. Let's call it Host. It contains an object as its state, with some getters to retrieve various forms of the state as well as some mutations to modify said state. However, when it es to actions, I perform certain asynchronous requests on host objects which I pass in to the actions as a parameter. For instance, a Host can be enabled or disabled. I, therefore, have an action hostEnable(host), which calls an Axios GET request which responds only with an OK (200).

const getDefaultState = () => {
    return {
        host: {...}
    }
};

export const state = getDefaultState();

const getters = {
    getHost: (state) => {
        return state.host;
    },
    ...
};

const mutations = {
    setHost: (state, host) => {
        state.host = host;
    },
    ...
};

const actions = {
    fetchHost ({mit}, hostId) => {
    api.get(hostId)
        .then(({data}) => {
            mit(setHost, data);
        })
        .catch(error => {
            throw new Error(error);
        });
    },
    createHost: ({state}) => {
        return api.create(state.host);
    },
    hostEnable: (context, host) => {
        return api.enableHost(host);
    },
    ...
};

export default {
    state,
    getters,
    actions,
    mutations
};

Is it fine to use a Vuex store in this way, or do all actions have to either use or modify the store state?

Is it good practice to use Vuex store actions to perform related asynchronous operations (e.g., GET requests) without actually modifying the state of the store?

I have a Vuex store. Let's call it Host. It contains an object as its state, with some getters to retrieve various forms of the state as well as some mutations to modify said state. However, when it es to actions, I perform certain asynchronous requests on host objects which I pass in to the actions as a parameter. For instance, a Host can be enabled or disabled. I, therefore, have an action hostEnable(host), which calls an Axios GET request which responds only with an OK (200).

const getDefaultState = () => {
    return {
        host: {...}
    }
};

export const state = getDefaultState();

const getters = {
    getHost: (state) => {
        return state.host;
    },
    ...
};

const mutations = {
    setHost: (state, host) => {
        state.host = host;
    },
    ...
};

const actions = {
    fetchHost ({mit}, hostId) => {
    api.get(hostId)
        .then(({data}) => {
            mit(setHost, data);
        })
        .catch(error => {
            throw new Error(error);
        });
    },
    createHost: ({state}) => {
        return api.create(state.host);
    },
    hostEnable: (context, host) => {
        return api.enableHost(host);
    },
    ...
};

export default {
    state,
    getters,
    actions,
    mutations
};

Is it fine to use a Vuex store in this way, or do all actions have to either use or modify the store state?

• javascript
• vue.js
• vuex

• "which calls an Axios GET request" - I assume you mean "PUT" – halfpad Commented Jan 10, 2019 at 14:16
• @halfpad in this case it is a GET request - in hindsight it should have been a PUT request though. – AnonymousDev Commented Mar 25, 2021 at 11:39

3 Answers 3

Is it fine to use a Vuex store in this way, or do all actions have to either use or modify the store state?

In this scenario, yes, it's perfectly fine and no, it doesn't have to modify anything.

Even though, it's not gonna behave in the way that a Vuex action is intended to work (since technically, actions are supposed to work with mutations in some fashion), you can define hostEnable as an action because it makes more sense to group all Host related business logic in one single module rather than putting it somewhere else in your codebase.

So yeah, you can use it to perform asynchronous operations without mitting any mutations to your store data since it's also responsible for containing plicated business logic in your application.

Lastly, using actions for asynchronous logic is one of the high-level principles when structuring your Vue application.

1. Application-level state is centralized in the store.

2. The only way to mutate the state is by mitting mutations, which are synchronous transactions.

3. Asynchronous logic should be encapsulated in, and can be posed with actions.

Key concepts:

State are to store your data.

Mutations are to handle sync operations to you data.

Actions are to handle async operations (that's why you receive a context object instead state as params )

Getters are to get data or transform it ( i.e. get the host that contains ip from canada, and so on )

Actions are supposed to change/mutate the state only, while Getters return data based on the state without mutating the state. See https://github./vuejs/vuex/issues/46#issuement-174539828

Store actions are for business logic without return statements. For instance, someStore.createXXX may make API call, then update list of items(state) with the response of that call and display notifications.

For just API calls we have API layer classes/functions e.g. productApi.js, userApi.js.

As a bonus, I remend to have multiple appropriate stores(e.g. blog post store, ment store, author store) instead of having one huge global store with unrelated stuff in it.