How and when to use actions Vuex for API requests?

After reading a few articles on the subject Vuex API calls and came to the conclusion that the API requests have to do inside actions Vuex (supposedly it best practices). However, I do not understand, is it always necessary. For clarity, give an example.

Objective: to obtain and display in the user list.

Create a simple storage Vuex:

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 all is well. But now I need to implement the ability to add users.

The idea in the actions add the addUser method:
actions: {
.....
 addUser({ commit }) {
 addUserAPICall().then(function(response) {
 // TODO
})
},
 },

Tell me what to do next after a request went to the server and we received the answer that the user has been added?

To create and cause mutation addUser to add new user in the state? But, in my opinion, this is wrong: after all, in parallel somebody can also add users on the server, and we did not know. Ie, the idea you need to once again call for action loadUsers(), but then what is the meaning of our state? In this case it looks like some layer between the server and our component, while not being the "source of truth", because if any action will still need to download data from the server.
April 4th 20 at 13:21
3 answers
April 4th 20 at 13:23
Solution
came to the conclusion that the API requests have to do inside actions Vuex (supposedly it best practices). However, I do not understand, is it always necessary

To make communicating with the api layer in vuex justified when the data come out you keep in vuex.

At the same time, of course, better if it is a mutation of something on the server to update the list from the server, and not try to repeat this mutation locally.

As to your question about what vuex looks interlayer: it was originally a different purpose, he is not obliged to contain the actual data from the database, this data layer for the application and it is needed to ensure that all shared data was in one place.

PS
1. add your actions using the API calls return, otherwise when you call in the component, they will return the promise that you expect from them.
2. Use helper mapActions, mapGetters.. will make communication with vuex in the components are much nicer
@eva_Howell if it helped, mark the solution please :) - Dariana94 commented on April 4th 20 at 13:26
April 4th 20 at 13:25
Solution
requests to the API need to do inside actions Vuex (supposedly it best practices). However, I do not understand, is it always necessary


state is needed in cases when access to the user list you need is not in one component, and at least two. In such cases, without it in any way.

If you are sure that the list of users you need only one component, then all the data should be stored in it.

It is important to understand the difference:
  • The data in Vuex "exist" always and always occupy part of the memory on the client.
  • The data in the component only "exist" when there is a component. And will be deleted if the deleted component.


If your app is tied to the user list, and multiple components use this data, without Vuex you will be difficult.

At the same time, if the user list you need only a widget that is displayed is not always — and then store the data in Vuex not worth it.

Cm. also

Tell me what to do next after a request went to the server and we received the answer that the user has been added?

This question is a completely different direction.

To create and cause mutation addUser to add new user in the state?

Yes. Actions to exist, so you could do some asynchronous queries, additional validation, data validation, determine whether you need something to keep state and if need what. Here you can add the user to check whether there are it, run an additional query to retrieve information about it. And so.
A mutation algorithm directly change the state.

what is the meaning of our state?

Local, fast, jet copy data from the server to the client.

if any action will still need to download data from the server

This is a question to the server. And its API. There are many different techniques for synchronizing data between a server and a client.

In fact, I don't see anything wrong after adding a new user to query and download the new updated list.
April 4th 20 at 13:27
Well, you get aydishnik the answer? So conflicts shouldn't be. And update the data... Well, in any case, you have to do, regardless of whether you added something or not, if the task requires

Find more questions by tags APIVue.js