Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
reng99 opened this issue Jul 26, 2019 · 0 comments
Open

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

reng99 opened this issue Jul 26, 2019 · 0 comments
Labels
blog a single blog vue

Comments

@reng99
Copy link
Owner

reng99 commented Jul 26, 2019

banner

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

@reng99 reng99 added blog a single blog vue labels Jul 26, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
blog a single blog vue
Projects
None yet
Development

No branches or pull requests

1 participant