数据全部存储在vuex好还是redux好?
Is it good to store all data in vuex or redux?
将数据保存在存储中会降低性能吗?
例如我们在 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 也是。
我不认为像您描述的那样使用 Vuex 有问题。如果你真的需要将数据存储在某个地方(vuex 或组件),它无论如何都必须使用内存 space。
我更喜欢将 Vuex 用于大型应用程序,因为它允许我划分数据并以更易于理解和更有条理的方式组织数据。此外,一个额外的好处是数据需要经历的生命周期,以便通过操作和突变存储在状态中,这改善了团队与状态交互的方式并鼓励遵循流程而不是直接编辑状态。
通过组件传递数据的方法也行得通。但是,随着应用程序的增长,您将需要不断将数据传递给您的子组件,并且传递具有复杂结构的对象会使您的组件难以维护,因为您最终将一个巨大的对象作为道具而不是多个简单的道具传递。
所以这取决于你。从性能的角度来看,我没有遇到 Vuex 和大型数据集的问题,但是如果您的应用程序增长太多,有一些方法可以提高 Vuex 的性能,如下所示:https://itnext.io/vue-js-app-performance-optimization-part-3-lazy-loading-vuex-modules-ed67cf555976
将数据保存在存储中会降低性能吗? 例如我们在 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 也是。
我不认为像您描述的那样使用 Vuex 有问题。如果你真的需要将数据存储在某个地方(vuex 或组件),它无论如何都必须使用内存 space。
我更喜欢将 Vuex 用于大型应用程序,因为它允许我划分数据并以更易于理解和更有条理的方式组织数据。此外,一个额外的好处是数据需要经历的生命周期,以便通过操作和突变存储在状态中,这改善了团队与状态交互的方式并鼓励遵循流程而不是直接编辑状态。
通过组件传递数据的方法也行得通。但是,随着应用程序的增长,您将需要不断将数据传递给您的子组件,并且传递具有复杂结构的对象会使您的组件难以维护,因为您最终将一个巨大的对象作为道具而不是多个简单的道具传递。
所以这取决于你。从性能的角度来看,我没有遇到 Vuex 和大型数据集的问题,但是如果您的应用程序增长太多,有一些方法可以提高 Vuex 的性能,如下所示:https://itnext.io/vue-js-app-performance-optimization-part-3-lazy-loading-vuex-modules-ed67cf555976