如何大大简化你的Vuex Store

随着Vue应用程序的大小增加,Vuex Store中的actionsmutations也会增加。本文,我们将介绍如何将其减少到易于管理的东西。

Vuex是什么

Vuexvue.js应用程序的状态管理模式+库。它充当应用程序中所有组件的集中存储,其规则确保状态只能以可预测的方式进行变更。

我们怎么使用Vuex

我们正在使用VuexFactory 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>
});

总结

通过统一我们的actionmutation,我们大大简化了我们的store中的actionsmutations

译者加:其实就是为了更好的管理vuex,而形成模版方式的编写

后话

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

我的博客即将同步至腾讯云+社区,邀请大家一同入驻:cloud.tencent.com/developer/s…