Должны ли действия Vuex изменять или использовать состояние магазина?

Question

Является ли хорошей практикой использование действий хранилища Vuex для выполнения связанных асинхронных операций (например, запросов GET) без фактического изменения состояния хранилища?

У меня есть магазин Vuex. Давайте назовем это Host. Он содержит объект в качестве своего состояния, с некоторыми получателями для извлечения различных форм состояния, а также с некоторыми мутациями для изменения указанного состояния. Однако, когда дело доходит до действий, я выполняю определенные асинхронные запросы к хост-объектам, которые я передаю действиям в качестве параметра. Например, хост может быть включен или отключен. Поэтому у меня есть действие enableHost(host), которое вызывает запрос Axios GET, который отвечает только 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 таким образом, или все действия должны использовать или изменять состояние хранилища?

Answer 1

Ключевые понятия:

Состояние для хранения ваших данных.

Мутации предназначены для обработки операций синхронизации с вашими данными.

Действия предназначены для обработки асинхронных операций (именно поэтому вы получаете context объект вместо state в качестве параметров)

Получатели должны получить данные и изменить их (т.е. получить хост, содержащий ip из Канады и т. Д.)

Answer 2

Можно ли использовать магазин Vuex таким образом, или все действия должны использовать или изменить состояние магазина?

В этом сценарии да, все отлично, и нет, ничего менять не нужно.

Несмотря на то, что он не будет вести себя так, как действие Vuex предназначено для работы (поскольку технически действия должны работать с мутациями каким-то образом), вы можете определить hostEnable как действие , потому что имеет смысл сгруппировать всю Host связанную бизнес-логику в одном модуле, а не размещать ее где-нибудь еще в вашей кодовой базе.

Так что да, вы можете использовать его для выполнения асинхронных операций без каких-либо изменений в данных вашего хранилища, поскольку он также отвечает за содержание сложной бизнес-логики в вашем приложении.

Наконец, использование actions для асинхронной логики является одним из принципов высокого уровня, когда структурирует ваше приложение Vue .

1. Состояние уровня приложения централизовано в магазине.

2. Единственный способ изменить состояние - это совершить мутации, которые синхронные транзакции.

3. Асинхронная логика должна быть инкапсулирована и может быть составлена ​​с помощью действия.