前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【译】如何大大简化你的Vuex Store

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

作者头像
Jimmy_is_jimmy
发布2019-07-30 17:29:05
1.6K0
发布2019-07-30 17:29:05
举报
文章被收录于专栏:call_me_R

随着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操作示例。

这个store有16个actions。现在想象一下,如果我们有9个store,我们的Factory Core Framework总共有多少个actions

简化我们的Actions

我们所有的actions操作基本上都执行相同的功能。每个action都执行以下操作:

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

要将这些重构为单个(统一)操作action,我们需要知道action需要明确的事情:

  • 要击中的端点(请求接口)
  • 在API调用中是否发送有效负载
  • 是否将数据提交到state中,如果是,则提交到哪个状态变量

我们当前的action

下面是我们其中的一个actions示范:

代码语言:javascript
复制
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

代码语言:javascript
复制
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

代码语言:javascript
复制
const mutations = {
    mutate(state, payload) {
       state\[payload.property\] = payload.with;
    }
};

如果一个action中需要在store中存储数据,我们如下调用mutation

代码语言:javascript
复制
commit('mutate', {
    property: <propertyNameHere>,
    with: <valueGoesHere>
});

总结

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

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

后话

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019年07月26日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Vuex是什么
  • 我们怎么使用Vuex
  • 简化我们的Actions
  • 我们当前的action
  • 使用统一的mutation
  • 总结
  • 后话
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档