Jak výrazně zjednodušit svůj obchod Vuex

Jak roste velikost vaší aplikace Vue, roste také počet akcí a mutací ve vašem obchodě Vuex. Dovolte mi ukázat vám, jak to zredukovat na něco lépe zvládnutelného.

Co je Vuex

Vuex je vzor správy stavu + knihovna pro aplikace Vue.js. Slouží jako centralizované úložiště pro všechny komponenty v aplikaci s pravidly zajišťujícími, že stav lze mutovat pouze předvídatelným způsobem.

Jak používáme Vuex

Používáme Vuex ke sdílení stavu mezi všemi aplikacemi v naší aplikaci Factory Core Framework. Vzhledem k tomu, že framework je balík aplikací, máme aktuálně devět obchodů Vuex. Každý obchod má svůj vlastní stav, akce a mutace. K volání API do backendu používáme akce v obchodě. Jakmile jsou data vrácena, použijeme mutace k jejich uložení ve stavu. To umožňuje jakékoli součásti přístup k těmto datům. Jak si dokážete představit, naše obchody mohou mít velmi velký počet akcí pro zpracování těchto volání API. Zde je příklad všech akcí v jedné z našich prodejen Vuex.

Tento obchod má 16 akcí. Nyní si představte, kolik akcí má náš Factory Core Framework celkem, pokud máme 9 obchodů!

Zjednodušení našich akcí

Všechny naše akce v zásadě provádějí stejnou funkcionalitu. Každá akce dělá následující:

• načíst data z rozhraní API (v případě potřeby zahrnout datovou část)
• (volitelně) ukládat data ve stavu
• vrátí odpověď komponentě, která akci vyvolala

Abychom je převedli do jediné akce, potřebovali jsme vědět, zda akce potřebuje vědět:

• koncový bod k zásahu
• zda chcete odeslat datovou část ve volání API nebo ne
• odevzdat data do stavu nebo ne, a pokud ano, do které stavové proměnné

Naše aktuální akce

Zde je příklad jedné z našich akcí.

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;
    }
},

Při této akci načteme data z našeho backendového API tak, že stiskneme koncový bod ‘api.factory.com/geteLineWorkOrders’. Po načtení dat se aktualizuje stavová proměnná currentWorkOrder. Nakonec jsou data vrácena komponentě, která provedla volání. Všechny naše akce mají tento formát. Abychom to mohli přefaktorovat do jediné akce, potřebujeme mít koncový bod, zda odeslat nebo neposílat užitečné zatížení a zda odeslat data. Zde je naše refaktorovaná jediná akce:

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;
   }
}

Tato jediná akce zvládne každý možný hovor. Pokud potřebujeme odeslat data pomocí volání API, udělá to. Pokud potřebujeme odevzdat data, udělá to. Pokud nepotřebuje odevzdat data, nečiní to. Vždy vrací data do komponenty.

Použití jedné mutace

Dříve jsme pro každou akci, která potřebovala mutovat stav, vytvořili novou mutaci, která to zvládne. Všechny jsme nahradili jedinou mutací. Zde je naše jediná mutace:

const mutations = {
    mutate(state, payload) {
       state\[payload.property\] = payload.with;
    }
};

Pokud akce potřebuje uložit data ve stavu, nazýváme tuto mutaci takto:

commit('mutate', {
    property: <propertyNameHere>,
    with: <valueGoesHere>
});

Závěr

Velmi jsme zjednodušili naše akce a mutace v našich obchodech tím, že máme pouze jednu akci a jednu mutaci.

Školicí kurzy

Tréninkové kurzy tvořím na svém webu CodePrep. Mám školení na Vue, Webpack, Flexbox, funkční programování a další. Podívejte se na to zde.