Do Vuex actions have to modify or use the store state?

Question

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 comes 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 ({commit}, hostId) => {
    api.get(hostId)
        .then(({data}) => {
            commit(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?

Martinson

"which calls an Axios GET request" - I assume you mean "PUT" – Epifaniaepifano

@Epifaniaepifano in this case it is a GET request - in hindsight it should have been a PUT request though. – Martinson

Answer 1

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 committing any mutations to your store data since it's also responsible for containing complicated 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 committing mutations, which are synchronous transactions.

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

Cymbal

Answer 2

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 )

Over

Just a note Getters should not mutate the state, while they can transform data and return it. – Misdeem

You're right, getter are to get or transform state, not mutate it. If you want to transform a state, you create a new version of it. – Over

Answer 3

Actions are supposed to change/mutate the state only, while Getters return data based on the state without mutating the state. See https://github.com/vuejs/vuex/issues/46#issuecomment-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 recommend to have multiple appropriate stores(e.g. blog post store, comment store, author store) instead of having one huge global store with unrelated stuff in it.

Misdeem