【譯】如何大大簡化你的Vuex Store

隨着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操做示例。

這個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，而造成模版方式的編寫

後話

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

更多的內容，請戳個人博客進行了解，能留個star就更好了💨