【译】如何大大简化你的Vuex Store

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就更好了💨