После прочтение нескольких статей на тему Vuex и API calls пришел к выводу, что запросы к API надо делать внутри actions Vuex (якобы это best practices). Однако, я совершенно не понимаю, всегда ли это необходимо. Для наглядности приведу пример.
Задача: получить и отображать в компоненте список пользователей.
Создаем простое хранилище 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;
},
}
})
И компонент, который отображает список пользователей:
export default {
name: "Items",
computed: {
users() {
return this.$store.getters['getUsers'];
}
},
created() {
this.$store.dispatch('loadUsers');
}
}
В таком виде все работает и все хорошо. Но теперь мне надо реализовать возможность добавления пользователей.
По идее в actions добавляем метод addUser:
actions: {
.....
addUser({ commit }) {
addUserAPICall().then(function(response) {
// TODO
})
},
},
Подскажите, что делать дальше, после того как запрос ушел на сервер и мы получили ответ, что пользователь добавлен?
Создать и вызвать мутацию addUser для добавления нового пользователя в state? Но, по-моему, это неправильно: ведь параллельно кто-то может тоже добавлять пользователей на сервере, а мы об этом не узнаем. Т.е. по идее нужно снова вызвать action loadUsers(), но в чем тогда смысл нашего state? В данном случае он выглядит какой-то прослойкой между сервером и нашим компонентом, при этом не являясь тем самым "источником истины", потому что при любом действии все равно необходимо загружать данные с сервера.
Средний
