Vuex-eiginleikar sem þú ættir að þekkja ef þér er virkilega annt um verslunina þína

Þess vegna verslun hefur orðið svo gagnlegur. Það er undir þér komið hvort þú notir React + Endurtekning eða Vue + Vuex – aðalmarkmiðið er það sama, nefnilega að halda þínu gögn skipulagt, aðgengilegt og öruggt á sama tíma.

Í þessari grein mun ég sýna þér nokkur dæmi um hvernig þú getur haldið Vuex-búðinni þinni hreinni og skilvirkari.

Áður en við byrjum skulum við gera ráð fyrir að:

• Þú hefur nokkra reynslu af nútíma JavaScript,
• Þú veist í grundvallaratriðum hvað Vue er og hvernig á að nota það. græjur, reiknað, o.s.frv.,
• Þú þekkir Vuex (aðgerðir, stökkbreytingar, o.s.frv.) og viltu gera forritin þín betri.

Vuex, eins og meirihluti kjarna Vue verkefni, er nokkuð vel skjalfest og þú getur fundið margar gagnlegar brellur í opinberum skjölum. Við höfum dregið út nokkrar nauðsynlegar upplýsingar úr þeim fyrir þig.

Grunnleg innleiðing Vuex-geymslu lítur svona út:

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

Venjulega, þegar forritið þitt verður stærra, þarftu að beita leiðakerfi, nokkrum alþjóðlegum fyrirmælum, viðbótum o.s.frv. Það gerir aðal.js Skráin verður mun lengri og erfiðari í lestri. Gott er að hafa verslunina í ytri skrá, eins og hér:

// 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. Einingar

Hvað ættir þú að gera þegar geymsla.js Verður skráin gríðarstór og erfitt að vinna með hana? Reyndar er til mjög flott Vuex-eiginleiki – einingar. Þeir eru tileinkaðir því að skipta gögnum þínum upp í aðskildar skrár.

Ímyndaðu þér að þú sért að vinna við einhvern fyrirtækjaforrit, þar sem þú hefur fá gagna svæði, til dæmis:

• notandi (stjórna öllum heimildum og leyfum),
• leiðarparametra (stjórna alþjóðlegum parametrum áður en beiðnir til forritaskil),
• sala (fyrir SalesMegaChart-hlutann þinn sem sést í mánaðarlegu/fjórðungslegu/árlegu samhengi),
• pantanir (sjást eftir að smellt er á SalesMegaChart-stangann).

…og kannski nokkur fleiri. Nú hefur þú alvarlegar ástæður til að innleiða einhvers konar móduleiningagerð í verslun þína.

Fyrst og fremst, færaðu geymsla.js skrá í nýlega búið til verslun/ Skráarvafra og endurnefna hann index.js. Valfrjálst, ef þú vilt halda öllu pakkað í einingar, fjarlægðu ríki, aðgerðir og stökkbreytingar úr aðal skránni.

// store/index.js

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

Vue.use(Vuex);

export default new Vuex.Store((
    modules: (
 // modules will go here
    )
));

Svo, hlið við `store/index.js` skrána, búðu til fyrsta modúlið – `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;
    )
);

export const user (
    state,
    actions,
    mutations)


Og nú, hlaðið tilbúnum módelinu inn í aðal `store/index.js` skrána:

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

Vue.use(Vuex);

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

Til hamingju! Nú hefur þú virkilega fallega útfærða búð. Þú getur einnig fengið aðgang að gögnum úr íhlutnum (t.d., Notendaprófíl.vue) eins og þetta:

<template>
    <div class="user-profile">
        <h2>(( notandanafn ))!</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. Nafnarými

Nú þegar þú veist hvernig á að nota einingar ættir þú einnig að kynnast Vuex-inum. Nafnarými. Á fyrri skrefi bjuggum við til verslun/notandi.js skrá hjá notandi eining.

Gagnabyggingin sem skilgreind er í notandi.js Skráin er aðgengileg úr íhlutunum, en þú getur séð að allt notandi Gögnin fara beint til hins alþjóðlega ríki samhengi, eins og hér:

reiknað: mapState((
    notandi: ríki => ríki.notandi
    // notandi: 'notandi' <-- önnur leið
))

Þegar þú skilgreinir fleiri einingar, gætirðu ruglast á því hvaða hlutur kemur úr hvaða einingu. Þá ættirðu að nota nafnarýmis-einingar og skilgreina þær á þennan hátt:

útflutningur fasti notandi (
    með nafnarými: satt, // <-- nafnarými!
    ástand,
    aðgerðir,
    breytingar
)

Frá og með nú skaltu nota "all your" í stað "all your" sem er rangt. notandi gögn (ríki breytilegur frá verslun/notandi.js skrár) verður meðhöndlað samkvæmt ríkisnotandi tilvísun:

computed: mapState((
    user: state => state.user.user
    // user: 'user/user' <-- önnur leið))


Nokkrum skrefum síðar geturðu náð svipuðum árangri fyrir component-ið:

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! Svo ferskt, svo hreint… En ekki hafa áhyggjur, endurskipulagning kóðans endar aldrei. Ertu tilbúinn fyrir næstu skref?

3. Samskipti milli eininga

Í fyrsta skrefinu sýndir þú mér nokkrar aðgerðir í notandi eining:

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

Ef mistakast, bætum við innskráningarvillu við búðina okkar – hvað gerist næst?

Hér höfum við nokkra valkosti og valið fer eftir því hvaða kostur hentar þínum þörfum betur. Einfaldasta leiðin notaði v-if Leiðbeining, sem gerir það kleift að birta villuskilaboð ef villa kemur upp í versluninni þinni.

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

export default (
    name: 'Dashboard',

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

Ímyndaðu þér aftur að þú hafir marga eininga og hver og einn reyna/fanga Syntax skapar nýja villu í versluninni þinni. Augljóslega ætlarðu að misnota DRY-regluna svona.

Hvernig geturðu gert villumeðferðarferlana þína almennari?

Skulum skilgreina almenn Búa til einingu og setja í hana nokkra rökfræði sem yrði notuð almennt.

// store/common.js

const state = (
    errors: []
);

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


const mutations = (
    ERROR (state, error) (
 /* þannig fáum við nýjasta villuna efst á listanum */
 state.errors = [error, ...state.errors];
    ))
);

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

Nú getum við aðlagað notandi modúl (og aðrir modúlar líka):

try (
    // einhver aðgerð
)catch (error) (
    commit("common/ERROR", error, ( root: true ));)


eða á fínni hátt, með því að nota almennu aðgerðina okkar:

try (
    // einhver aðgerð)
 catch (error) (
    dispatch("error", error);
)

Þessi málfar skuldbinda og afgreiðsla Hringingar virðast sjálfskýrðar, en þú getur lesið meira um þessi brögð. hér.

Þegar þú hefur allar villur á einum stað geturðu auðveldlega hlaðið þeim inn í þitt Mælaborð þáttur:

reiknað: mapState((
    villur: 'common/errors')),


eftirlit: (
    /* þetta er kallað eftir hverja "common/ERROR" breytingu, þar sem við bætum aðeins nýjum villum við geymsluna, einni í einu */
    villur() (
 this.showErrorMessage(this.errors[0]);
    )
)

Fyrri dæmið með the almenn Meðhöndlun villa í módúli er þegar skilvirk lausn, en þú getur farið enn lengra.

Eins og þú sérð, erum við að fylgjast með breytingum á algengar villur rað í búðinni. Í tilvikum eins og þessum, þegar þú þarft að framkvæma ákveðna aðgerð við tiltekna breytingu, geturðu notað Vuex viðbætur eða jafnvel Hærri stigs íhluti (HOC).

Ég mun fjalla um viðbæturnar og HOC-in í næsta grein. Á meðan, takk fyrir að lesa þessa færslu, vonandi hafið þið notið dæmin sem við höfum undirbúið.

Fylgstu með og haltu áfram að kóða!

Lesa meira:

– Hvernig má bæta Vue.js-forrit? Nokkur hagnýt ráð

– GraphQL: lærdómar af framleiðslu

– Shopify, Spree eða Solidus? Skoðaðu hvers vegna Ruby on Rails getur hjálpað þér að þróa netverslun þína.