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

1

Является ли хорошей практикой использование действий хранилища 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 таким образом, или все действия должны использовать или изменять состояние хранилища?

  • 0
    «который вызывает запрос Axios GET» - я полагаю, вы имеете в виду «PUT»
Теги:
vue.js
vuex

2 ответа

1

Ключевые идеи:

Государство должно хранить ваши данные.

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

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

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

1

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

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

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

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

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

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

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

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню