Vuex funktsioonid, mida peaksite teadma, kui te tõesti oma poest hoolidate

See on põhjus, miks kauplus on muutunud nii kasulikuks. See on teie otsustada, kas kasutate React + Redux või Vue + Vuex - peamine eesmärk on sama, nimelt hoida oma andmeid korraga struktureerituna, juurdepääsetavana ja turvalisena.

Selles artiklis näitan teile mõned näited, kuidas hoida oma Vuex poodi puhtana ja tõhusana.

Enne kui alustame, eeldame, et:

• teil on mõningaid kogemusi kaasaegse JavaScript,
• te põhimõtteliselt teate, mis on Vue ja kuidas seda kasutada. rekvisiidid, arvutatud, jne,
• olete tuttav Vuex (tegevused, mutatsioonid, jne) ja soovite oma rakendusi paremaks muuta.

Vuex, nagu enamik põhilisi Vue projektid, on üsna hästi dokumenteeritud ja ametlikest dokumentidest leiate palju kasulikke häkke. Me oleme teile sellest välja võtnud mõned olulised andmed.

Põhiline Vuex poe rakendamine näeb välja selline:

// main.js

import Vue from 'vue'
import Vuex from 'vuex'
import App from "./App";

Vue.use(Vuex)

const store = new Vuex.Store((
  state: (
    data: null;
  ),
  actions: (
      someAction: (( commit ), data) (
          commit("SOME_MUTATION", data);
      )
  ),
  mutations: (
    SOME_MUTATION (state, data) (
        state.data = data;
    )
  ))
));

new Vue((
  el: "#app",
  render: h => h(App),
  store
));

Tavaliselt, kui teie rakendus muutub suuremaks, peate rakendama marsruutimist, mõningaid globaalseid direktiive, pistikprogramme jne. See muudab main.js fail palju pikem ja raskemini loetav. Hea tava on hoida salvestus välises failis, nagu siin:

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

const state = (
    data: null;
);

const actions = (
    someAction: (( commit ), data) (
        commit("SOME_MUTATION", data);
    )
);

const mutations = (
    SOME_MUTATION (state, data) (
        state.data = data;
    )
);

export default new Vuex.Store((
    state,
    actions,
    mutations
));

1. Moodulid

Mida peaksite tegema, kui store.js faili muutub tohutu suureks ja raskesti töödeldavaks? Tegelikult on Vuex'il üks väga lahe funktsioon - moodulid. Need on mõeldud teie andmete jagamiseks eraldi failideks.

Kujutage ette, et töötate näiteks mõne ettevõtte rakenduse kallal, kus teil on mõned andmevaldkonnad:

• kasutaja (hallata kõiki volitusi ja õigusi),
• marsruudi parameetrid (hallata globaalseid parameetreid enne API-le esitatavaid taotlusi),
• müük (teie SalesMegaChart komponendi jaoks, mis on nähtav igakuises/neljapäevases/aastases kontekstis),
• tellimused (nähtavad pärast klõpsamist riba SalesMegaChart).

...ja võib-olla veel mõned. Nüüd on teil tõsiseid põhjusi, et võtta oma poes kasutusele mõningane modulaarsus.

Kõigepealt liigutage store.js faili äsja loodud poe/ kataloogi ja nimetage see ümber index.js. Valikuliselt, kui soovite hoida kõike moodulitesse pakituna, eemaldage riik, tegevused ja mutatsioonid põhifailist.

// store/index.js

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

Vue.use(Vuex);

export default new Vuex.Store((
    modules: (
        // moodulid lähevad siia
    )
));

Seejärel loome faili `store/index.js` kõrvale esimese mooduli - `store/user.js`.

import ApiService from '../services/api.service';

const state = (
    loggedIn: false,
    loginError: null,
    user: null
);

const actions = (
    login: async (( commit ), data) (
        try (
            const response = await ApiService.post('/login', data);
            const ( user ) = response.data;

            COMMIT("SAVE_USER", user);
            COMMIT("LOGIN_SUCCESS");
        ) catch (error) (
            commit("LOGIN_ERROR", error);
        )
    )
);

const mutations = (
    SAVE_USER (state, user) (
        state.user = user;
    ),

    LOGIN_SUCCESS (state) (
        state.loggedIn = true;
    ),

    LOGIN_ERROR (state, error) (
        state.loginError = error;
        state.loggedIn = false;
    )
);

eksport const user (
    state,
    actions,
    mutations
)

Ja nüüd laadige valmis moodul peafaili `store/index.js`:

import Vue from 'vue'.
import Vuex from 'vuex'.
import ( user ) from './user';

Vue.use(Vuex);

export default new Vuex.Store((
    modules: (
        kasutaja
    )
));

Palju õnne! Nüüd on teil tõesti kena poe rakendamine. Saate ka komponentide andmetele ligi (nt, UserProfile.vue) niimoodi:

<template>
    <div class="user-profile">
        <h2>(( user.name ))!</h2>
        <!-- component template goes here -->
    </div>
</template>

<script> import ( mapActions ) from 'Vuex';

    export default (
        name: 'UserProfile',

        computed: mapState((
            user: state => state.user
            // user: 'user' <-- alternative syntax
        ))
    )
</script>

2. Nimeruumid

Nüüd, kui te teate, kuidas mooduleid kasutada, peaksite tutvuma ka Vuexi nimede vahelejätmine. Eelmisel sammul lõime me store/user.js faili koos kasutaja moodul.

Andmestruktuur, mis on määratletud user.js fail on komponentidest ligipääsetav, kuid te võite märgata, et kõik kasutaja andmed lähevad otse globaalsesse riik kontekstis, nagu siin:

arvutatud: mapState((
    user: state => state.user
    // user: 'user' <-- alternatiivne viis
))

Kui te defineerite rohkem mooduleid, tekib tõenäoliselt segadus, milline objekt pärineb millisest moodulist. Siis peaksite kasutama nimevahega mooduleid ja defineerima neid sel viisil:

eksport const user (
    namespaced: true, // <-- namespacing!
    state,
    actions,
    mutations
)

Nüüdsest alates on kõik teie kasutaja andmed (riik muutuja alates store/user.js faili) käsitletakse all state.user viide:

arvutatud: mapState((
    user: state => state.user.user
    // user: 'user/user' <-- alternatiivne viis
))

Paar sammu hiljem saab komponendi jaoks saavutada midagi sellist:

import ( mapActions ) from 'Vuex';

export default (
    name: 'Dashboard',

    computed: mapState((
        sales: 'sales/data',
        orders: 'orders/data',
        sortBy: 'orders/sortBy',
        loggedIn: 'user/loggedIn'
    )),

    methods: mapActions((
        logout: 'user/logout',
        loadSales: 'sales/load',
        loadOrders: 'orders/load'
    )),

    created() (
        if (this.loggedIn) (
            loadSales();
            loadOrders();
        )
    )
)

Bravo! Nii värske, nii puhas... Aga ärge muretsege, uuendamine ei lõpe kunagi. Valmis järgmisteks sammudeks?

3. Moodulite vaheline side

Esimeses etapis, ma näitasin mõned meetmed, mis on seotud kasutaja moodul:

const actions = (
    login: async (( commit ), data) (
        try (
            const response = await ApiService.post('/login', data);
            const ( user ) = response.data;

            COMMIT("SAVE_USER", user);
            COMMIT("LOGIN_SUCCESS");
        ) catch (error) (
            commit("LOGIN_ERROR", error);
        )
    )
);

Ebaõnnestumise korral lisame oma poodi sisselogimisvea - mis saab edasi?

Siin on mitu võimalust ja valik sõltub sellest, milline variant sobib teie vajadustele paremini. Lihtsaim viis kasutada v-if direktiiv, tänu millele saab kuvada veateate, kui teie poes on viga.

<template>
    <div class="dashboard">
        <!-- dashboard component template -->
        <div
            v-if="error"
            class="error-message"
        > (( error.message )) </div>
    </div>
</template>
<script> import ( mapActions ) from 'Vuex';

export default (
    name: 'Dashboard',

    computed: mapState((
        error: "user/loginError"
    ))
)
</script>

Kujutage jälle ette, et teil on palju mooduleid ja iga moodul on try/catch süntaks tekitab teie poes uue vea. Ilmselt kuritarvitate sel viisil DRY reeglit.

Kuidas saate oma veakäitlusprotsesse üldisemaks muuta?

Määratleme ühine moodul ja panna sinna sisse loogika, mida kasutatakse globaalselt.

// store/common.js

const state = (
    errors: []
);

const actions = (
    error: (
        root: true,
        handler(( commit ), error) (
            commit("ERROR", error);
        )
    )
),

const mutations = (
    ERROR (state, error) (
        /* nii saame kõige uuema vea nimekirja tippu */
        state.errors = [error, ...state.errors];
    ))
);

eksport const common (
    namespaced: true,
    state,
    mutations
)

Nüüd saame kohandada kasutaja moodul (ja ka teised moodulid):

proovi (
    // mingi tegevus
)catch (error) (
    commit("common/ERROR", error, ( root: true ));
)

või elegantsemal viisil, kasutades meie globaalset tegevust:

try (
    // some action
) catch (error) (
    dispatch("error", error);
)

See süntaks on commit ja saatmine kõned tunduvad iseenesestmõistetavad, kuid nende trikkide kohta saate lugeda lähemalt siin.

Kui teil on kõik vead ühes kohas, saate neid hõlpsasti laadida oma Armatuurlaud komponent:

arvutatakse: mapState((
    errors: 'common/errors'
)),

watch: (
    /* seda kutsutakse üles pärast iga "common/ERROR" mutatsiooni, kus me lisame ainult uued vead ükshaaval salvestusse */
    errors() (
        this.showErrorMessage(this.errors[0]);
    )
)

Eelmine näide koos ühine mooduli veakäitlus on juba tõhus lahendus, kuid te võite minna veelgi kaugemale.

Nagu näete, jälgime muutusi seoses ühised/vead massiivi poes. Sellistel juhtudel, kui teil on vaja määrata mingi tegevus konkreetse mutatsiooni kohta, võite kasutada funktsiooni Vuex pluginad või isegi kõrgema astme komponendid (HOC).

Järgmises artiklis käsitlen pistikprogramme ja HOC-i. Vahepeal tänan teid selle sissekande lugemise eest, loodetavasti meeldisid teile meie koostatud näited.

Jääge kursis ja jätkake kodeerimist!

Loe edasi:

– Kuidas parandada Vue.js rakendusi? Mõned praktilised näpunäited

– GraphQL: tootmises saadud õppetunnid

– Shopify, Spree või Solidus? Vaadake, miks Ruby on Rails aitab teil arendada oma e-kaubandust.