banner
随着Vue应用程序的大小增加，Vuex Store中的actions和mutations也会增加。本文，我们将介绍如何将其减少到易于管理的东西。
Vuex是什么
Vuex是vue.js应用程序的状态管理模式+库。它充当应用程序中所有组件的集中存储，其规则确保状态只能以可预测的方式进行变更。
我们怎么使用Vuex
我们正在使用Vuex在Factory Core Framework应用程序中的所有应用程序之间共享状态。由于框架是一组应用程序，（假设）我们目前有九个Vuex stores。每个store都有自己的state, actions和mutations。我们在store中使用actions来对后台进行API调用。数据返回后，我们使用mutations将其存储在state中。这允许任何组件访问该数据。可以想象到，我们的store可以有大量的actions来处理这些API调用。以下是我们其中一个Vuex stores中所有的actions操作示例。
actions
这个store有16个actions。现在想象一下，如果我们有9个store，我们的Factory Core Framework总共有多少个actions。
简化我们的Actions
我们所有的actions操作基本上都执行相同的功能。每个action都执行以下操作：
- 从API获取数据（必要时包括有效负载）
- 以
state存储数据（可选） - 返回对调用该
action组件的响应
要将这些重构为单个（统一）操作action，我们需要知道action需要明确的事情：
- 要击中的端点（请求接口）
- 在API调用中是否发送有效负载
- 是否将数据提交到
state中，如果是，则提交到哪个状态变量
我们当前的action
下面是我们其中的一个actions示范：
async getLineWorkOrders({ rootState, commit }, payload) {
try {
let response = await axios.post(
'api.factory.com/getLineWorkOrders',
Object.assign({}, payload.body, { language: rootState.authStore.currentLocale.locale }),
rootState.config.serviceHeaders
);
commit( 'setCurrentWorkOrderNumber', response.data.currentWorkOrderNumber );
return response.data;
} catch (error) {
throw error;
}
},
在这个action中，我们通过击中端点（发起请求）api.factory.com/geteLineWorkOrders从我们的后台API获取数据。检索到数据之后，将更新state变量currentWorkOrder。最后，数据将返回到进行调用的组件中。我们所有的actions都有这种格式。要将它重构为单个操作，我们需要拥有端点，无论是否发送有效负载以及是否提交数据。下面👇是我们重构的单一action：
async fetchData({ rootState, commit }, payload) {
try {
let body = { language: rootState.authStore.currentLocale.locale };
if (payload) {
body = Object.assign({}, payload.body, body);
}
let response = await axios.post(\`api.factory.com/${payload.url}\`, body, rootState.config.serviceHeaders );
if (payload.commit) {
commit('mutate', {
property: payload.stateProperty,
with: response.data\[payload.stateProperty\]
});
}
return response.data;
} catch (error) {
throw error;
}
}
此单个action将处理每种可能的调用。如果我们需要通过API调用发送数据，它可以做到。如果我们需要commit提交数据，它可以做到。如果它不需要提交数据，则不会。它始终将数据返回到组件。
使用统一的mutation
之前，对于需要改变状态mutate state的每个action，我们创建了一个新的mutation来处理这个问题。我们使用单一的mutation来处理这个问题。下面是我们的单一mutation：
const mutations = {
mutate(state, payload) {
state\[payload.property\] = payload.with;
}
};
如果一个action中需要在store中存储数据，我们如下调用mutation：
commit('mutate', {
property: <propertyNameHere>,
with: <valueGoesHere>
});
总结
通过统一我们的action和mutation，我们大大简化了我们的store中的actions和mutations。
译者加：其实就是为了更好的管理vuex，而形成模版方式的编写
后话
- 原文：https://dev.to/ratracegrad/how-to-greatly-simplify-your-vuex-store-1fkl
- 文章首发：https://github.com/reng99/blogs/issues/41
更多的内容，请戳我的博客进行了解，能留个star就更好了💨
网友评论