Является ли хорошей практикой использование действий хранилища Vuex для выполнения связанных асинхронных операций (например, запросов GET) без фактического изменения состояния хранилища?
У меня есть магазин Vuex. Пусть называют это Host. Он содержит объект в качестве своего состояния, с некоторыми получателями для извлечения различных форм состояния, а также с некоторыми мутациями для изменения указанного состояния. Однако, когда дело доходит до действий, я выполняю определенные асинхронные запросы к хост-объектам, которые я передаю действиям в качестве параметра. Например, хост может быть включен или отключен. Поэтому у меня есть действие enableHost(host)
, которое вызывает GET-запрос enableHost(host)
который отвечает только 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
};
Можно ли использовать хранилище Vuex таким образом, или все действия должны использовать или изменять состояние хранилища?
Ключевые идеи:
Государство должно хранить ваши данные.
Мутации предназначены для обработки операций синхронизации с вашими данными.
Действия должны выполнять операции асинхронных (то почему вы получите context
объект, а не state
, как Params)
Получатели должны получить данные и изменить их (т.е. получить хост, который содержит ip из Канады, и так далее)
Можно ли использовать хранилище Vuex таким образом, или все действия должны использовать или изменять состояние хранилища?
В этом сценарии да, это прекрасно, и нет, ничего менять не нужно.
Несмотря на то, что он не будет вести себя так, как действие Vuex предназначено для работы (поскольку технически действия должны работать с мутациями каким-то образом), вы можете определить hostEnable
как действие, потому что имеет больше смысла группировать все Host
связанная бизнес-логика в одном модуле, а не в другом месте в вашей кодовой базе.
Так что да, вы можете использовать его для выполнения асинхронных операций без каких-либо изменений в данных вашего хранилища, поскольку он также отвечает за содержание сложной бизнес-логики в вашем приложении.
Наконец, использование actions
для асинхронной логики является одним из принципов высокого уровня при структурировании вашего приложения Vue.
Состояние уровня приложения централизовано в магазине.
Единственный способ изменить состояние - это зафиксировать мутации, которые являются синхронными транзакциями.
Асинхронная логика должна быть инкапсулирована и может состоять из действий.