How and when is it correct to use Vuex actions for API requests?

Question

API

After reading several articles on Vuex and API calls, I came to the conclusion that API requests should be made inside Vuex actions (supposedly these are best practices). However, I don't understand at all whether this is always necessary. For clarity, I will give an example.
Task: get and display a list of users in the component.
Create a simple Vuex store:

export default new Vuex.Store({
    state: {
        users: []
    },

    getters: {
        getUsers(state) {
            return state.users;
        }
    },
    actions: {
        loadUsers({ commit }) {
            getUsersAPICall().then(function(response) {
                commit("saveUsers", response['data']);
            })
        },
    },
    mutations: {
        saveUsers(state, users) {
            state.users = users;
        },
    }
})

And a component that displays a list of users:

export default {
    name: "Items",
    computed: {
        users() {
            return this.$store.getters['getUsers'];
        }
    },
    created() {
        this.$store.dispatch('loadUsers');
    }
}

In this form, everything works and everything is fine. But now I need to implement the ability to add users.
In theory, we add the addUser method to actions:

actions: {
        .....
        addUser({ commit }) {
            addUserAPICall().then(function(response) {
                // TODO
            })
        },
    },

Tell me what to do next after the request has gone to the server and we received a response that the user has been added?
Create and invoke an addUser mutation to add a new user to the state? But, in my opinion, this is wrong: after all, in parallel, someone can also add users to the server, but we will not know about it. Those. in theory, you need to call action loadUsers () again, but then what is the point of our state? In this case, it looks like some kind of layer between the server and our component, while not being the same “source of truth”, because any action still needs to load data from the server.

Answer 1

came to the conclusion that API requests should be made inside Vuex actions (supposedly these are best practices). However, I don't understand if this is always necessary.

It is justified to communicate with the api layer in vuex when the data that comes from there you store in vuex.
In this case, of course, it is better to update this list from the server when mutating something on the server, rather than trying to repeat this mutation locally.
As for your question about the fact that vuex looks like a layer: it initially has a different purpose, it does not have to completely contain the actual data from the database, it is a data layer for the application and it is needed so that all common data is in one place.
PS
1. add to your actions that use API return calls, otherwise, when called in a component, they will not return the promise that you expect from them.
2. Using mapActions, mapGetters.. helpers will make communication with vuex in components much prettier

Answer 2

Well, you get an ID in the answer, don't you? So there shouldn't be any collisions. And updating the data ... Well, in any case, you need to do it, regardless of whether you added something or not, if the task requires it