logo

Průvodce Vuex – Centralizovaná správa státu pro aplikace Vue

Úvod

Vuex je knihovna, která ukládá data v obchodě Vuex , který funguje jako zdroj dat o stavech v aplikaci Vue. Tento obchod obsahuje globální stát (množina vlastností) a funkcí (getters , akce a mutace ) slouží ke čtení a změně stavu.

Zvažte scénář, ve kterém chcete vytvořit jednoduchou aplikaci Vue, která vám umožní přidat nebo odebrat hodnotu z proměnné count , jako na obrázku níže:

Normálním procesem by bylo - nejprve definovat funkci, která vrací naše count proměnná:

data() {
   return {
     count: 0
  }
}

A pak definujte funkci zvýšení a snížení, abychom mohli manipulovat s count :

methods: {
  increment() {
    this.count++;
  },
  decrement() {
    this.count--;
  }
}

Můžete použít komponentu props , ale vezmeme-li v úvahu realistický případ práce s 50-100 (nebo více) součástmi, používání rekvizit by se stalo poměrně rychle únavným.

Sdílení dat mezi komponentami se stává složitějším při vývoji rozsáhlých aplikací, tedy aplikací s desítkami komponent. To je důvod, proč řešení jako Vuex byly vytvořeny – aby bylo řízení státu méně bolestivé.

Začínáme s Vuex

Vuex se inspiroval projekty jako Flux od Facebooku a React's State Management Library, Redux , aby bylo ukládání a výměna reaktivních dat v rámci vaší aplikace Vue co nejjednodušší a zároveň byl zajištěn výkon a udržovatelnost.

Toho lze dosáhnout pomocí centralizovaného obchodu ze kterých čerpáte data a do kterých data zapisujete. Neexistuje žádný jiný způsob, jak jej získat nebo změnit – díky tomu je konzistentní a stabilní u mnoha komponent. To odstraňuje nestabilitu, která může být často způsobena, když spolu více reaktivních komponent mluví.

Podle jeho dokumentace:

Toho je dosaženo třemi typy metod, pracujících na zaznamenaném stavu. Gettry se používají k získání dat z úložiště, akce se používají k asynchronnímu načítání dat, jejich zpracování a vyvolání mutací a mutace se používají ke změně zdrojových dat v úložišti. V jistém smyslu si můžete představit cyklus:

Prostřednictvím těchto prvků můžete provádět stabilní a udržovatelnou správu stavu.

Instalace Vuex

Existuje několik způsobů, jak nainstalovat Vuex – většina z nich závisí na tom, jak jste si aplikaci vue vytvořili.

Poznámka: Pokud jste již obeznámeni s procesem instalace Vuex, můžete tuto část přeskočit a přejít na Centralizované řízení státu s Vuex sekce.

Pokud váš projekt používá Vue CDN spíše než stažené nástroje jako vue-cli nebo vite , budete si chtít stáhnout zdrojový soubor Vuex a zahrnout jej do označení aplikace:

<script src="/path/to/vue.js"></script>
<script src="/path/to/vuex.js"></script>

Pokud používáte vue-cli, můžete přímo zahrnout oficiální balíčky Vue, jako je vue-router a vuex během procesu instalace.

Nejprve budete chtít vytvořit nový projekt Vue:

$ vue create project-name

Spuštěním by se měl zobrazit následující výstup:

Odtud můžete pomocí klávesnice přejít na Ručně vybrat funkce možnost přidat všechny balíčky, které bude vaše aplikace potřebovat, včetně Vuex:

Případně, pokud máte existující projekt vytvořený pomocí vue-cli nebo Vite, který nemá předchozí podporu pro Vuex, můžete jej nainstalovat pomocí npm nebo yarn :

$ npm install vuex --save
# Or yarn
$ yarn add vuex

Konfigurace Vuex

Pokud jste nainstalovali Vuex jako balíček s yarn nebo npm , musíte výslovně instruovat Vue, aby jej používal jako plugin:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

new Vue({...})

Centralizované státní řízení s Vuex

Obchod je centrem všech operací v aplikaci Vuex. Je to reaktivní kontejner, který uchovává stav celé vaší aplikace a také funkce potřebné pro čtení a zápis do této sady stavů. Data nebo metody definované v obchodě jsou navíc univerzální , což znamená, že k nim máte přístup odkudkoli ve vaší aplikaci vue.

Nový obchod Vuex můžeme snadno vytvořit jeho inicializací pomocí importovaného Vuex :

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {},
  mutations: {},
  actions: {},
  getters: {}
});

Zdarma e-kniha:Git Essentials

Prohlédněte si našeho praktického průvodce učením Git s osvědčenými postupy, průmyslově uznávanými standardy a přiloženým cheat sheetem. Přestaňte používat příkazy Google Git a skutečně se naučte to!

Zatímco je prázdný – obchod má jen sbírku prázdných stavů, mutací, akcí a getterů. K této instanci úložiště můžeme přistupovat prostřednictvím globálního this.$store instance! Než k němu přistoupíme, budeme ho chtít zaregistrovat v naší instanci Vue:

new Vue({
  el: '#app',
  store: store,
})

Nyní můžeme obchod naplnit stavy a funkcemi, díky kterým bude pro nás užitečný!

Stát Vuex

Zvažte stav Vuex být ekvivalentem data v instanci Vue. Na rozdíl od data , vše, co ve stavu uložíte, je globální – to znamená, že to není omezeno na jedinou komponentu a lze k němu přistupovat nebo jej upravovat kdekoli ve vaší aplikaci.

Položky do stavu můžete přidat jednoduchým přidáním vlastností do state pole instance obchodu:

const store = new Vuex.Store({
  state: {
    name: "John Doe",
    age: 12,
    details: {
      city: "San Fransisco",
      country: "USA",
    },
  },
});

Zde jsme definovali stav pro username , age a details (objekt obsahující city uživatele a country ). Tyto vlastnosti state jsou nyní globálně přístupné!

Obvykle byste zde definovali nějaké globální konstanty.

Přístup do států Vuex

Nejjednodušší způsob, jak získat hodnotu stavu, je vrátit stav z vypočítané vlastnosti. Řekněme, že chceme získat přístup ke globálnímu name a age uveďte v našem obchodě:

computed: {
  name() {
      return this.$store.state.name;
    },
  age() {
     return this.$store.state.age;
    },
}

Poznámka: Deklarování všech těchto vypočítaných vlastností se může stát únavným a podrobným, když komponenta potřebuje přístup k několika stavům úložiště. Právě pro to je vytvořena pomocná třída, kterou za chvíli probereme!

Samozřejmě, že tyto hodnoty jsou nyní přístupné v našem značkování:

<template>
  <div id="app">
    <p>Name: {{ name }}</p>
    <p>Age: {{ age }}</p>
  </div>
</template>
mapState() Pomocník

Deklarace vypočítaných vlastností, jak je vidět v předchozím příkladu, může být velmi zdlouhavá. Vuex to předvídá a dodává s pomocníkem pro generování vypočítaných funkcí getru. Je to mapovač státu a umožňuje vám snadno mapovat vypočítané stavy na kratší aliasy.

Například importujme mapState() pomocná funkce a mapování state.name a state.age na kratší aliasy:

// First - import mapState
import { mapState } from "vuex";

export default {
  name: "ComponentName",
  computed: mapState({
    name: (state) => state.name,
    age: (state) => state.age,
  }),
};

Funkce získávání

Funkce Getter jsou funkce používané k získání vypočítaná vlastnost z obchodu. Při získávání vlastnosti – můžete se rozhodnout data dodatečně filtrovat, ověřovat nebo s nimi v případě potřeby manipulovat, než je vrátíte.

Poznámka: Gettery se používají pouze získat data a neměnit původní zdroj. Zatímco můžete filtrovat a manipulovat s tím, co dostanete zpět k uživateli, nesmíte měnit původní zdroj na místě.

Řekněme například, že existuje stav, který sleduje celá čísla. Pomocí funkce getter můžete vrátit čísla tak, jak jsou, nebo roztřiďte je a odřízněte z nich nějaké číslo, abyste se vrátili:

const store = new Vuex.Store({
  state: {
    myNumbers: [11, 3, 5, 1, 54, 56, ...],
  },
  getters: {
    firstFiveSorted: (state) => {
      return state.myNumbers.sort().slice;
    },
  },
});

Tento getter je nyní dostupný v store.getters globální objekt a lze k němu také přistupovat v rámci libovolné komponenty:

//...
computed: {
  firstFiveSorted () {
    return this.$store.getters.firstFiveSorted
  }
}

Toto však také po chvíli se stane podrobným. Stejně jako vy můžete mapovat státy k jejich aliasům můžete také mapovat gettery na jejich vlastní aliasy prostřednictvím mapGetters() pomocná funkce:

import { mapGetters } from "vuex";

export default {
  computed: {
    ...mapGetters({
      // this example will map `myNumbers` to `this.$store.getters.firstFiveSorted`
      myNumbers: "firstFiveSorted",
    }),
  },
};

Mutace Vuex

Ve Vuexu je jediným způsobem, jak upravit zdrojový stav, pomocí mutací . Můžete si je představit jako methods vlastnost v instanci Vue, ale slouží k úpravě stavu v obchodě Vuex. Navíc se mutace provádějí prostřednictvím obchodu , aby bylo zajištěno, že změny budou předvídatelné.

Poznámka: Podle konvence jsou názvy mutací psány velkými písmeny a stylizovány s SNAKE_CASE .

Mutace obdrží jako první argument stav a jako druhý volitelný náklad (tj. volitelné argumenty potřebné k provedení mutace):

const store = new Vuex.Store({
  state: {
    myNumbers: [11, 3, 5, 1, 54, 56]
  },
  mutations: {
    ADD_NUMBER(state, numberToAdd) {
      state.myNumbers.push(numberToAdd);
    },
  }
})

A abychom mohli vyvolat mutaci, budeme muset zavolat store.commit() metoda s názvem mutace a její užitečnou zátěží, pokud existuje:

this.$store.commit('ADD_NUMBER', 75);

Jediný způsob, jak volat mutace, je zavázat se změna obchodu, předání názvu mutace.

Poznámka: Jednou nevýhodou mutací je, že musí být synchronní , tj. nemůžete v nich provádět asynchronní operaci. Vuex actions jsou řešením, které probereme v následující části.

Akce

Akce se používají k načtení a zpracování dat před mutací provést tu změnu. Navíc můžete asynchronně provádět více volání mutace prostřednictvím akcí, zatímco samotné mutace se pak provádějí synchronně. Kromě toho mohou akce volat jiné akce, na rozdíl od mutací, které musí být vyvolány pomocí commit() metoda.

Akce obdrží context objekt a volitelné užitečné zatížení jako jejich parametr. Objekt kontextu poskytuje přístup k metodám, jako je context.commit() , která vám umožní spáchat mutaci. context.state() a context.getters() vám umožní přístup ke stavu obchodu a getterům. context objekt není instance obchodu – pouze odhaluje stejné vlastnosti jako instance obchodu.

Řekněme například, že chceme provést asynchronní operaci, která přidá náhodné číslo do myNumber pole každých n sekund:

const store = new Vuex.Store({
  state: {
    myNumbers: [11, 3, 5, 1, 54, 56, "..."],
  },
  mutations: {
    ADD_RANDOM_NUMBER(state) {
      // Push a random number to `myNumbers` array
      state.myNumbers.push(Math.floor(Math.random() * 10));
    },
  },
  actions: {
    // Using destructuring to extract only `commit()` from the `context` object
    addNumber({ commit }, time) {
      setInterval(() => {
        commit("ADD_RANDOM_NUMBER");
      }, time * 1000);
    },
  },
});

Abychom vyvolali samotnou akci, vyzveme k tomu také obchod – prostřednictvím dispatch() funkce:

store.dispatch('ADD_RANDOM_NUMBER', 10);

Procházení obchodu zajišťuje, že stav se vždy změní pouze předvídatelným způsobem.

Závěr

V této příručce jsme se podívali na Vuex – oficiální obchod státní správy Vue.

Vuex Store je sbírka stavů, getterů, mutací a akcí. Stavy se používají k definování vlastností globálního stavu, zatímco k jejich získání se používají getry. Vlastnosti stavu a gettery můžete mapovat na kratší aliasy, aby bylo snazší na ně odkazovat. Mutace a akce pracují ruku v ruce na změně vlastností stavu kontrolovaným způsobem.

S tímto – můžete použít Vuex na svůj další projekt Vue!