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

随着Vue应用程序的大小增长，Vuex Store中的actions和mutations也会增长。本文，咱们将介绍如何将其减小到易于管理的东西。javascript

Vuex是什么

Vuex是vue.js应用程序的状态管理模式+库。它充当应用程序中全部组件的集中存储，其规则确保状态只能以可预测的方式进行变动。vue

咱们怎么使用Vuex

咱们正在使用Vuex在Factory Core Framework应用程序中的全部应用程序之间共享状态。因为框架是一组应用程序，（假设）咱们目前有九个Vuex stores。每一个store都有本身的state, actions和mutations。咱们在store中使用actions来对后台进行API调用。数据返回后，咱们使用mutations将其存储在state中。这容许任何组件访问该数据。能够想象到，咱们的store能够有大量的actions来处理这些API调用。如下是咱们其中一个Vuex stores中全部的actions操做示例。java

这个store有16个actions。如今想象一下，若是咱们有9个store，咱们的Factory Core Framework总共有多少个actions。ios

简化咱们的Actions

咱们全部的actions操做基本上都执行相同的功能。每一个action都执行如下操做：git

从API获取数据（必要时包括有效负载）
以state存储数据（可选）
返回对调用该action组件的响应

要将这些重构为单个（统一）操做action，咱们须要知道action须要明确的事情：github

要击中的端点（请求接口）
在API调用中是否发送有效负载
是否将数据提交到state中，若是是，则提交到哪一个状态变量

咱们当前的action

下面是咱们其中的一个actions示范：vuex

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：axios

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提交数据，它能够作到。若是它不须要提交数据，则不会。它始终将数据返回到组件。api

使用统一的mutation

以前，对于须要改变状态mutate state的每一个action，咱们建立了一个新的mutation来处理这个问题。咱们使用单一的mutation来处理这个问题。下面是咱们的单一mutation：markdown

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，而造成模版方式的编写

后话

原文：dev.to/ratracegrad…
文章首发：github.com/reng99/blog…

更多的内容，请戳个人博客进行了解，能留个star就更好了💨

个人博客即将同步至腾讯云+社区，邀请你们一同入驻：cloud.tencent.com/developer/s…

本文同步分享在博客“Jimmy”（JueJin）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。