Ievads par Pinia vietnē Vue.js

Key Takeaways

• Pinia ir Vue valsts pārvaldības bibliotēka, kas nodrošina vienkāršību un efektivitāti lietotņu izstrādē, koncentrējoties uz minimālismu un intuitīvu pieeju.
• Pinia pamatjēdzieni ietver ieguvējus, darbības, veikalu un stāvokli, kas ļauj izstrādātājiem efektīvi pārvaldīt un koplietot datus savos Vue komponentos.
• Salīdzinot ar Vuex, Pinia piedāvā modernāku un minimālistiskāku pieeju, izmantojot Vue reaktivitātes sistēmu un nodrošinot stingru rakstīšanas un TypeScript atbalstu izturīgākām lietojumprogrammām ar mazākām kļūdām. Tā ir dzīvotspējīga iespēja jauniem projektiem vai migrācijai no Vuex.

Vai esat Vue izstrādātājs, kurš vēlas racionalizēt valsts pārvaldību un pacelt savu lietotņu izstrādi jaunos augstumos? Sasveicinieties ar Pinia — Vue entuziastu štata pārvaldības bibliotēku, kas maina situāciju.

Soli pa solim apskatiet Pinia pamatkoncepcijas un uzziniet, kā jūs varat izmantot tās potenciālu. Uzziniet, kā šī bibliotēka ir salīdzināma ar Vuex, un uzziniet, kā izveidot vienkāršu Pinia lietotni.

Kas ir Pinija?

Pinia ir īpaši valsts pārvaldes bibliotēka izstrādāts Vue, kas izstrādāta, lai jūsu Vue projektos nodrošinātu nepārspējamu vienkāršību un efektivitāti. Izstrādāts, lai Vue izstrādātājiem nodrošinātu nevainojamu pieredzi, Pinia smeļas iedvesmu no paraugprakses mūsdienīga valsts pārvaldība, vienlaikus īpaši viegla un vienkārša integrēšanai jūsu lietojumprogrammās.

Pinia pamatā ir filozofija, lai lietas būtu minimālas un elegantas, padarot izstrādātājiem vienkāršu lietojumprogrammas stāvokļa pārvaldību. Izmantojot vienkāršu un intuitīvu pieeju, Pinia ļauj koncentrēties uz vissvarīgāko un nodrošināt izcilu lietotāja pieredzi, veidojot savu Vue lietotni.

Pinia pamatjēdzieni

Lai maksimāli izmantotu Pinia, ir svarīgi saprast tās pamatjēdzienus.

Getteri

Getters in Pinia ir atbildīgi par konkrētu vērtību izgūšanu un atgriešanu no veikala stāvokļa. Definējot getterus, varat efektīvi piekļūt datiem un tos apstrādāt, tieši nemanipulējot ar pamatā esošo stāvokli. Uztveriet tos kā aprēķinātus rekvizītus, kas pielāgoti jūsu veikala stāvoklim.

Darbības

Darbībām Pinia ir izšķiroša nozīme, ļaujot mainīt veikala stāvokli, veicot asinhronas vai sinhronas darbības. Tie kalpo kā tilts starp jūsu lietojumprogrammas komponentiem un veikalu, nodrošinot, ka stāvokļa mutācijas atbilst paredzamiem modeļiem un atbilst paraugpraksei.

Veikals

Veikals ir Pinia sirds, kurā ir ietverts lietojumprogrammas stāvoklis, ieguvēji, darbības un mutācijas (ja tādas ir). Tas darbojas kā vienots patiesības avots, saglabājot jūsu lietojumprogrammas stāvokli centralizētu un viegli pieejamu visos jūsu komponentos.

Valsts

Stāvoklis attiecas uz datiem, ko pārvalda jūsu veikals. Tie ir reaktīvie dati, uz kuriem jūsu komponenti paļaujas, lai parādītu lietotājam visjaunāko informāciju. Izmantojot stāvokļa objektu veikalā, varat nemanāmi pārvaldīt un koplietot datus starp komponentiem.

Kas par Vuex?

Jums varētu rasties jautājums, kā Pinia ir salīdzināma ar Vuex, kas jau ilgu laiku ir bijusi Vue izstrādātāju štata pārvaldības bibliotēka. Lai gan Vuex neapšaubāmi ir spēcīgs un jaudīgs risinājums, Pinia izceļas ar modernāku un minimālistiskāku pieeju.

Pinia izmanto Vue reaktivitātes sistēmu, lai pārvaldītu stāvokli, izvairoties no jebkādas ārējas atkarības. Tas nozīmē, ka Pinia ekosistēma ir vairāk koncentrēta un izvairās no iespējamās uzpūšanās. Turklāt stingrais rakstīšanas un TypeScript atbalsts, ko tas nodrošina, ļauj uztvert kļūdas agrīnā izstrādes procesā, tādējādi radot stabilākas lietojumprogrammas ar mazāku kļūdu skaitu.

Ja sākat jaunu Vue projektu vai apsverat migrāciju no Vuex, Pinia piedāvā pievilcīgu alternatīvu, kas racionalizē valsts pārvaldību, neapdraudot elastību vai veiktspēju.

Vienkārša Vue lietotne, izmantojot Pinia

Lai uzzinātu visu par Pinia, mēģiniet izveidot lietojumprogrammas paraugu; a pamata uzdevumu saraksta pārvaldnieks ir labs kandidāts. Uzdevumu saraksta lietotnei ir vienkārša struktūra, kurā lietotāji var pievienot veicamos uzdevumus, atzīmēt un norādīt to izpildi, kā arī dzēst un rediģēt darbus pēc vajadzības. Pinia nodrošina nepieciešamos rīkus, lai pārvaldītu šādu lietojumprogrammu stāvokli.

Priekšnoteikumi

Pirmkārt, jums ir jāsagatavo šim projektam nepieciešamā vide, sākot ar Vue CLI.

# To install Vue CLI:
npm install -g @vue/cli
# To create the project folder with Vue CLI:
vue create pinia-todo-app

Šajā posmā jūs varat redzēt terminālī, ka jums ir jāizvēlas iepriekšējais iestatījums. Varat turpināt, izvēloties Vue 3 no noklusējuma iestatījumiem; šis piemērs būs turpiniet lietot Vue 3.

Tagad jūs varat instalēt Pinia savā projekta mapē:

cd pinia-todo-app
npm install pinia

Iestatiet savus failus

Lai pabeigtu šo projekta paraugu, jums vienkārši jārediģē daži faili.

Vispirms izveidojiet failu ar nosaukumu veikals.js saskaņā src mapi. Šajā failā tiks saglabāti, pievienoti un dzēsti vienumi, kurus pievienosit uzdevumu sarakstam. Tas viss tiks darīts, izmantojot Pinia pamatjēdzienus.

// src/store.js
import { defineStore } from"pinia";
exportconst useTodoStore = defineStore("todo", {
 state: () => ({
 todos: [],
 }),
 actions: {
 addTodo(todoText) {
this.todos.push({ id: Date.now(), text: todoText });
 },
 removeTodo(todoId) {
this.todos = this.todos.filter((todo) => todo.id !== todoId);
 },
 },
});

Bet, protams, ar šo failu vien nepietiek. Jums ir jāsaista veikals.js failu ar App.vue. Lai to izdarītu, mainiet src/App.vue failu šādi:

// src/App.vue