Vuex funkcijos, kurias turėtumėte žinoti, jei tikrai rūpinatės savo parduotuve

Dėl šios priežasties parduotuvė tapo toks naudingas. Nuo jūsų priklauso, ar naudosite React + Redux arba Vue + Vuex - pagrindinis tikslas yra tas pats, t. y. išlaikyti savo duomenys struktūrizuotas, prieinamas ir kartu saugus..

Šiame straipsnyje pateiksiu keletą pavyzdžių, kaip išlaikyti Vuex parduotuvę švarią ir veiksmingą.

Prieš pradėdami darykime prielaidą, kad:

• turite tam tikros patirties su šiuolaikinėmis JavaScript,
• iš esmės žinote, kas yra Vue ir kaip jį naudoti rekvizitai, apskaičiuotas, ir t. t,
• esate susipažinę su Vuex (veiksmai, mutacijos, ir t. t.) ir norite patobulinti savo programas.

Vuex, kaip ir dauguma pagrindinių Vue projektai, yra gana gerai dokumentuotas, o oficialiuose dokumentuose galite rasti daug naudingų gudrybių. Iš jos ištraukėme jums keletą svarbiausių duomenų.

Pagrindinis Vuex parduotuvės įgyvendinimas atrodo taip:

// main.js

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

Vue.use(Vuex)

const store = new Vuex.Store((
  state: (
    duomenys: null;
  ),
  veiksmai: (
      someAction: (( commit ), data) (
          commit("SOME_MUTATION", duomenys);
      )
  ),
  mutacijos: (
    SOME_MUTATION (būsena, duomenys) (
        state.data = data;
    )
  ))
));

naujas Vue(((
  el: "#app",
  atvaizdavimas: h => h(App),
  store
));

Paprastai, kai programa tampa didesnė, reikia taikyti maršrutizavimą, kai kurias globalias direktyvas, įskiepius ir pan. Dėl to main.js failas daug ilgesnis ir sunkiau įskaitomas. Gera praktika yra saugoti saugyklą išoriniame faile, pavyzdžiui, čia:

// store.js
importuoti Vue iš 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

const state = (
    data: null;
);

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

const mutations = (
    SOME_MUTATION (būsena, duomenys) (
        state.data = data;
    )
);

export default new Vuex.Store(((
    state,
    veiksmai,
    mutacijos
));

1. Moduliai

Ką turėtumėte daryti, kai store.js failas tampa milžiniškas ir su juo sunku dirbti? Tiesą sakant, yra tikrai šauni Vuex funkcija - moduliai. Jie skirti duomenims padalyti į atskirus failus.

Įsivaizduokite, kad dirbate su tam tikra įmonės programa, kurioje, pavyzdžiui, turite kelis duomenų domenus:

• naudotojas (tvarkykite visus įgaliojimus ir leidimus),
• maršruto parametrai (tvarkykite bendruosius parametrus prieš užklausas į API),
• pardavimai (jūsų "SalesMegaChart" komponento, matomo mėnesio, ketvirčio ar metų kontekste),
• užsakymai (matomi paspaudus "SalesMegaChart" juostą).

...ir galbūt dar keletas. Dabar turite rimtų priežasčių savo parduotuvėje įdiegti modulinę struktūrą.

Pirmiausia perkelkite store.js failą į naujai sukurtą parduotuvė/ katalogą ir pervadinkite jį index.js. Jei norite, kad viskas būtų sudėta į modulius, galite pašalinti valstybė, veiksmai ir mutacijos iš pagrindinio failo.

// store/index.js

importuoti Vue iš 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

export default new Vuex.Store((
    modules: (
        // moduliai pateks čia
    )
));

Tada šalia failo `store/index.js` sukurkite pirmąjį modulį - `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 (būsena, klaida) (
        state.loginError = error;
        state.loggedIn = false;
    )
);

export const user (
    state,
    actions,
    mutacijos
)

Dabar įkelkite paruoštą modulį į pagrindinį `store/index.js` failą:

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

Vue.use(Vuex);

export default new Vuex.Store((
    moduliai: (
        naudotojas
    )
));

Sveikiname! Dabar turite tikrai gražiai atrodančią parduotuvę. Taip pat galite pasiekti duomenis iš komponento (pvz, UserProfile.vue) taip:

<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. Vardų erdvės

Dabar, kai žinote, kaip naudoti modulius, taip pat turėtumėte susipažinti su Vuex vardų išdėstymas. Ankstesniame žingsnyje sukūrėme store/user.js failą su naudotojas modulis.

Duomenų struktūra, apibrėžta user.js failas yra pasiekiamas iš komponentų, tačiau galite pastebėti, kad visi naudotojas duomenys patenka tiesiai į pasaulinę valstybė kontekstą, kaip čia:

apskaičiuota: mapState((
    user: state => state.user
    // user: 'user' <-- alternatyvus būdas
))

Kai apibrėšite daugiau modulių, tikriausiai supainiosite, kuris objektas iš kurio modulio yra kilęs. Tuomet turėtumėte naudoti vardų skyrių modulius ir juos apibrėžti tokiu būdu:

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

Nuo šiol visi jūsų naudotojas duomenys (valstybė kintamasis iš store/user.js failas) bus tvarkomas pagal state.user nuoroda:

apskaičiuota: mapState((
    user: state => state.user.user
    // user: 'user/user' <-- alternatyvus būdas
))

Po kelių žingsnių galite pasiekti, kad komponentas būtų panašus į šį:

importuoti ( mapActions ) iš 'Vuex';

eksportas pagal nutylėjimą (
    name: 'Dashboard',

    apskaičiuota: mapState((
        sales: 'sales/data',
        orders: 'orders/data',
        sortBy: 'orders/sortBy',
        loggedIn: 'user/loggedIn
    )),

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

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

Bravo! Toks šviežias, toks švarus... Bet nesijaudinkite, pertvarkymas niekada nesibaigia. Ar esate pasirengę kitiems žingsniams?

3. Ryšys tarp modulių

Pirmajame žingsnyje parodžiau tam tikrą veiksmą naudotojas modulis:

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

Nesėkmės atveju į savo parduotuvę įtraukiame prisijungimo klaidą - kas toliau?

Čia yra kelios galimybės, o pasirinkimas priklauso nuo to, kuris variantas labiau atitinka jūsų poreikius. Paprasčiausias būdas v-if direktyva, kurios dėka galima rodyti klaidos pranešimą, jei parduotuvėje įvyko klaida.

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

Vėlgi įsivaizduokite, kad turite daug modulių ir kiekvienas iš jų Try/catch sintaksė sukuria naują klaidą jūsų parduotuvėje. Akivaizdu, kad tokiu būdu ketinate piktnaudžiauti DRY taisykle.

Kaip galite padaryti, kad klaidų tvarkymo procesai būtų bendresni?

Apibrėžkime bendras modulį ir į jį įtraukite tam tikrą logiką, kuri būtų naudojama visuotinai.

// store/common.js

const state = (
    errors: []
);

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

const mutations = (
    ERROR (būsena, klaida) (
        /* tokiu būdu naujausia klaida bus sąrašo viršuje */
        state.errors = [error, ...state.errors];
    ))
);

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

Dabar galime pritaikyti naudotojas modulį (ir kitus modulius):

pabandykite (
    // koks nors veiksmas
)catch (error) (
    commit("common/ERROR", error, ( root: true ));
)

arba elegantiškesnis būdas, naudojant mūsų visuotinį veiksmą:

bandykite (
    // koks nors veiksmas
) catch (error) (
    išsiųsti ("error", error);
)

Ši sintaksė įsipareigoti ir išsiuntimas skambučiai atrodo savaime suprantami, tačiau apie šias gudrybes galite paskaityti daugiau čia.

Kai visos klaidos bus vienoje vietoje, galėsite jas lengvai įkelti į Prietaisų skydelis komponentas:

apskaičiuota: mapState((
    klaidos: 'common/errors'
)),

watch: (
    /* tai bus atliekama po kiekvienos "common/ERROR" mutacijos, kai į saugyklą po vieną pridedame tik naujas klaidas */
    errors() (
        this.showErrorMessage(this.errors[0]);
    )
)

Ankstesniame pavyzdyje su bendras klaidų tvarkymo modulis jau yra veiksmingas sprendimas, tačiau galima žengti dar toliau.

Kaip matote, stebime pokyčius bendras/klaidos masyvas parduotuvėje. Tokiais atvejais, kai reikia nustatyti tam tikrą veiksmą, susijusį su konkrečia mutacija, galite naudoti Vuex papildiniai arba net aukštesnės eilės komponentai (HOC).

Kitame straipsnyje aptarsiu įskiepius ir HOC. Tuo tarpu dėkoju, kad perskaitėte šį įrašą, ir tikiuosi, kad jums patiko mūsų parengti pavyzdžiai.

Sekite naujienas ir toliau programuokite!

Skaityti daugiau:

- Kaip patobulinti Vue.js programas? Keletas praktinių patarimų

- GraphQL: gamybinė patirtis

- "Shopify", "Spree" ar "Solidus"? Sužinokite, kodėl Ruby on Rails gali padėti jums sukurti jūsų e. parduotuvę