将所有数据存储在vuex或redux中好吗？答案

【问题标题】：Is it good to store all data in vuex or redux?将所有数据存储在vuex或redux中好吗？
【发布时间】：2020-02-01 14:40:53
【问题描述】：

在存储中保存数据会降低性能吗？例如我们在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，react 和 redux 也是。

【问题讨论】：

标签： vue.js redux vuex state-management

【解决方案1】：

我不认为像您描述的那样使用 Vuex 是一个问题。如果您确实需要将数据存储在某个地方（vuex 或组件），那么无论如何都必须使用内存空间。

我更喜欢将 Vuex 用于大型应用程序，因为它允许我划分数据并以更易于理解和更有条理的方式组织数据。此外，另一个好处是数据需要经历的生命周期才能通过操作和突变存储在状态中，这改善了团队与状态交互的方式，并鼓励遵循流程而不是直接编辑状态。

通过组件传递数据的方法也有效。但是，随着应用程序的增长，您需要不断地将数据传递给您的子组件，并且传递具有复杂结构的对象会使您的组件难以维护，因为您最终将一个巨大的对象作为道具而不是多个简单的道具传递。

所以这取决于你。从性能的角度来看，我没有遇到 Vuex 和大型数据集的问题，但是如果您的应用程序增长过多，有一些方法可以提高 Vuex 的性能，例如：https://itnext.io/vue-js-app-performance-optimization-part-3-lazy-loading-vuex-modules-ed67cf555976

【讨论】：