Хорошо ли хранить все данные в vuex или redux?

Question

Удержание данных в хранилище снижает производительность? Например, у нас есть приложение в vue, я получаю данные о клиентах с сервера по API. и сохранить его в Vuex, и я могу установить некоторые фильтры для получения отфильтрованных данных. Вот состояние моего vuex.

export const state = () => ({
    allCustomers: [],
    hasError: false,
    loading: false,
    searchForm: {
        name: "",
        nationalCode: "",
        mobile: ""
    },
    filterForm: {
        minAge: "",
        maxAge: "",
        minVisit: "",
        maxVisit: "",
        gender: ""
    },
    tagForm: {
        visitTag: "",
        serviceTag: ""
    }
});

Мой код запроса на получение данных находится в части действий:

export const actions = {
    async getCustomer({ commit, state }, API) {
        commit(`${ActionsTypes.CHANGE_HAS_ERROR}`, false);
        commit(`${ActionsTypes.CHANGE_LOADING}`, true);
        commit(`${ActionsTypes.CLEAR_ARRAY}`);
        try {
            const {
                data: { data }
            } = await API.get("api/admin/customer", {
                params: setParams({ ...state.searchForm, ...state.filterForm, ...state.tagForm })
            });
            data.map(item =>
                commit(`${ActionsTypes.CHANGE_ALL_CUSTOMER}`, new Customer(item))
            );
        } catch (err) {
            commit(`${ActionsTypes.CHANGE_HAS_ERROR}`, true);
        }
        commit(`${ActionsTypes.CHANGE_LOADING}`, false);
    }
};

Я могу сохранить эти данные в локальных данных компонента и передать их через дочерние компоненты. Но я хочу знать, хорошо ли хранить все данные в vuex. Я знаю, что их легко хранить в локальных данных, но я хочу иметь один шаблон во всем моем коде. И мой главный вопрос заключается в том, что хранение данных в vuex снижает производительность? и это касается не только vue, но и реакции и редукса тоже.

Answer 1

Я не думаю, что использование Vuex, как вы описали, является проблемой. Если вам действительно нужно где-то хранить данные (vuex или компоненты), ему все равно придется использовать пространство памяти.

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

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

Так что решать вам. С точки зрения производительности у меня не было проблем с Vuex и большими наборами данных, но есть способы улучшить производительность Vuex, если ваше приложение слишком сильно растет, например: https://itnext.io/vue-js-app-performance-optimization-part-3-lazy-loading-vuex-modules-ed67cf555976