Vuex funkcijas, kas jums jāzina, ja patiešām rūpējaties par savu veikalu

Tas ir iemesls, kāpēc veikals ir kļuvusi tik noderīga. Tas ir atkarīgs no jums, vai izmantojat React + Redux vai Vue + Vuex - galvenais mērķis ir tas pats, proti. saglabāt savu dati strukturēts, pieejams un vienlaikus drošs..

Šajā rakstā es jums parādīšu dažus piemērus, kā saglabāt Vuex veikalu tīru un efektīvu.

Pirms sākam, pieņemsim, ka:

• jums ir zināma pieredze ar modernu JavaScript,
• jūs būtībā zināt, kas ir Vue un kā to lietot rekvizīti, aprēķināts, utt.,
• jūs zināt Vuex (darbības, mutācijas, u.c.) un vēlaties uzlabot savas programmas.

Vuex, tāpat kā lielākā daļa galveno Vue projekti, ir diezgan labi dokumentēta, un oficiālajos dokumentos var atrast daudz noderīgu hakeru. Mēs esam ieguvuši no tās dažas būtiskas ziņas.

Vuex veikala pamata implementācija izskatās šādi:

// main.js

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

Vue.use(Vuex)

const store = new Vuex.Store(((
  state: (
    dati: null;
  ),
  darbības: (
      someAction: (( commit ), data) (
          commit("SOME_MUTATION", data);
      )
  ),
  mutācijas: (
    SOME_MUTATION (stāvoklis, dati) (
        state.data = data;
    )
  ))
));

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

Parasti, kad lietotne kļūst lielāka, ir jāpielieto maršrutēšana, dažas globālās direktīvas, spraudņi utt. Tas padara main.js fails ir daudz garāks un grūtāk lasāms. Laba prakse ir glabāt krātuvi ārējā failā, piemēram, šeit:

// store.js
importēt Vue no '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,
    darbības,
    mutācijas
));

1. Moduļi

Ko darīt, ja store.js fails kļūst milzīgs un ar to ir grūti strādāt? Patiesībā Vuex ir patiešām lieliska funkcija - moduļi. Tie ir paredzēti datu sadalīšanai atsevišķos failos.

Iedomājieties, ka strādājat ar kādu uzņēmuma lietojumprogrammu, kurā, piemēram, ir daži datu domēni:

• lietotājs (pārvaldīt visas pilnvaras un atļaujas),
• maršruta parametrus (pārvaldīt globālos parametrus pirms pieprasījumiem uz API),
• pārdošanas apjomi (jūsu SalesMegaChart komponentei, kas redzama mēneša/ceturkšņa/gada kontekstā),
• pasūtījumi (redzami pēc klikšķa uz SalesMegaChart joslas).

...un varbūt vēl daži citi. Tagad jums ir nopietni iemesli ieviest savā veikalā modularitāti.

Vispirms pārvietojiet store.js failu uz jaunizveidotu veikals/ direktoriju un pārdēvēt to index.js. Pēc izvēles, ja vēlaties, lai viss būtu iepakots moduļos, noņemiet valsts, darbības un mutācijas no galvenā faila.

// store/index.js

importēt Vue no 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

export default new Vuex.Store(((
    modules: (
        // moduļi tiks ievietoti šeit
    )
));

Pēc tam blakus `store/index.js` datnei izveidojiet pirmo moduli - `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 (stāvoklis, kļūda) (
        state.loginError = error;
        state.loggedIn = false;
    )
);

export const user (
    state,
    actions,
    mutācijas
)

Un tagad ielādējiet gatavu moduli galvenajā `store/index.js` failā:

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

Vue.use(Vuex);

export default new Vuex.Store(((
    moduļi: (
        user
    )
));

Apsveicam! Tagad jums ir patiešām jauka veikala implementācija. Jūs varat arī piekļūt datiem no komponenta (piem., Lietotāja profils.vue), piemēram, šādi:

<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. Nosaukumu telpas

Tagad, kad zināt, kā lietot moduļus, jums vajadzētu iepazīties arī ar Vuex. vārdšķiras. Iepriekšējā solī mēs izveidojām store/user.js failu ar lietotājs modulis.

Datu struktūra, kas definēta user.js fails ir pieejams no komponentēm, bet jūs varat pamanīt, ka visi lietotājs dati nonāk tieši globālajā valsts kontekstu, piemēram, šeit:

aprēķināts: mapState((
    user: state => state.user
    // user: 'user' <-- alternatīvs veids
))

Definējot vairāk moduļu, iespējams, radīsies neskaidrības par to, kurš objekts no kura moduļa nāk. Tad jums vajadzētu izmantot nosaukumiem atbilstošus moduļus un definēt tos šādā veidā:

eksportēt const user (
    namespaced: true, // <-- namespacing!
    state,
    actions,
    mutācijas
)

No šī brīža visi jūsu lietotājs dati (valsts mainīgais lielums no store/user.js fails) tiks apstrādāts ar state.user atsauce:

aprēķināts: mapState((
    user: state => state.user.user
    // user: 'user/user' <-- alternatīvs veids
))

Dažus soļus vēlāk komponentei var panākt kaut ko līdzīgu:

importēt ( mapActions ) no 'Vuex';

export default (
    name: 'Dashboard',

    aprēķināts: mapState(((
        sales: 'sales/data',
        orders: 'orders/data',
        sortBy: 'orders/sortBy',
        loggedIn: 'user/loggedIn'
    )),

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

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

Bravo! Tik svaigs, tik tīrs... Bet neuztraucieties, refaktorizācija nekad nebeidzas. Vai esat gatavi nākamajiem soļiem?

3. Saziņa starp moduļiem

Pirmajā solī es parādīju dažas darbības programmā lietotājs modulis:

const darbības = (
    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);
        )
    )
);

Neveiksmes gadījumā mēs pievienojam pierakstīšanās kļūdu mūsu veikalā - kas tālāk?

Šeit ir vairākas iespējas, un izvēle ir atkarīga no tā, kura no tām labāk atbilst jūsu vajadzībām. Visvienkāršākais veids ir izmantot v-if direktīvai, ar kuras palīdzību var parādīt kļūdas ziņojumu, ja veikalā ir kļūda.

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

Atkal iedomājieties, ka jums ir daudz moduļu un katrs no tiem ir mēģināt/atvairīt sintakse ģenerē jaunu kļūdu jūsu veikalā. Acīmredzot šādā veidā jūs ļaunprātīgi izmantosiet DRY noteikumu.

Kā kļūdu apstrādes procesus padarīt vispārīgākus?

Definēsim kopīgs moduli un ievietot tajā loģiku, kas tiktu izmantota globāli.

// store/common.js

const state = (
    kļūdas: []
);

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

const mutations = (
    ERROR (stāvoklis, kļūda) (
        /* šādā veidā jaunākā kļūda būs saraksta augšpusē */
        state.errors = [error, ...state.errors];
    ))
);

export const common (
    namespaced: true,
    state,
    mutācijas
)

Tagad mēs varam pielāgot lietotājs modulis (un arī citi moduļi):

mēģiniet (
    // kāda darbība
)catch (error) (
    commit("common/ERROR", error, ( root: true ));
)

vai elegantāk, izmantojot mūsu globālo darbību:

mēģiniet (
    // kāda darbība
) catch (error) (
    dispatch("error", error);
)

Šī sintakse izdarīt un nosūtīšana zvani šķiet pašsaprotami, taču par šiem trikiem varat izlasīt vairāk. šeit.

Kad visas kļūdas ir apkopotas vienuviet, varat tās viegli ielādēt savā Vadības panelis sastāvdaļa:

aprēķināts: mapState((
    kļūdas: 'common/errors'
)),

watch: (
    /* tas tiks izsaukts pēc katras "common/ERROR" mutācijas, kad mēs tikai pievienosim jaunas kļūdas krātuvei pa vienai */
    errors() (
        this.showErrorMessage(this.errors[0]);
    )
)

Iepriekšējais piemērs ar kopīgs moduļa kļūdu apstrāde jau ir efektīvs risinājums, taču var iet vēl tālāk.

Kā redzat, mēs vērojam izmaiņas saistībā ar kopīgas/kļūdas masīvs veikalā. Šādos gadījumos, kad nepieciešams noteikt kādu darbību attiecībā uz konkrētu mutāciju, varat izmantot Vuex spraudņi vai pat augstākā līmeņa komponenti (HOC).

Par spraudņiem un HOC tiks runāts nākamajā rakstā. Tikmēr paldies, ka izlasījāt šo ierakstu, un cerams, ka jums patika mūsu sagatavotie piemēri.

Sekojiet līdzi un turpiniet kodēt!

Lasīt vairāk:

- Kā uzlabot Vue.js lietotnes? Daži praktiski padomi

- GraphQL: ražošanā gūtā pieredze

- Shopify, Spree vai Solidus? Pārbaudiet, kāpēc Ruby on Rails var palīdzēt jums attīstīt e-komerciju