A Pinia bemutatása a Vue.js-ben

Kulcs elvitelek

• A Pinia a Vue állami felügyeleti könyvtára, amely egyszerűséget és hatékonyságot kölcsönöz az alkalmazásfejlesztésnek, a minimalizmusra és az intuitív megközelítésre összpontosítva.
• A Pinia alapkoncepciói közé tartoznak a getterek, a műveletek, a tárolás és az állapot, amelyek lehetővé teszik a fejlesztők számára, hogy hatékonyan kezeljék és megosszák az adatokat a Vue összetevőiben.
• A Vuexhez képest a Pinia modernebb és minimalistább megközelítést kínál, a Vue reaktivitási rendszerét használja, és szigorú gépelési és TypeScript-támogatást biztosít a robusztusabb alkalmazásokhoz, amelyek kevesebb hibát tartalmaznak. Ez egy életképes lehetőség új projektekhez vagy a Vuexről való migrációhoz.

Ön Vue fejlesztő, aki szeretné egyszerűsíteni államigazgatását, és új magasságokba emelni az alkalmazásfejlesztést? Köszöntsd a Piniát, a Vue-rajongóknak szánt, átalakuló államigazgatási könyvtárat.

Tekintse meg lépésről lépésre a Pinia alapkoncepcióit, és nézze meg, hogyan tudja kibontakozni a benne rejlő lehetőségeket. Tudja meg, hogyan hasonlítható össze ez a könyvtár a Vuex-szel, és tanulja meg, hogyan hozhat létre egyszerű Pinia alkalmazást.

Mi az a Pinia?

A Pinia kifejezetten állami kezelésű könyvtár Vue számára készült, amelynek célja, hogy páratlan egyszerűséget és hatékonyságot hozzon Vue projektjeibe. A Vue fejlesztői számára zökkenőmentes élmény biztosítására kifejlesztett Pinia a legjobb gyakorlatokból merít ihletet. modern államkezelés, miközben rendkívül könnyű és egyszerűen integrálható az alkalmazásokba.

A Pinia mögött meghúzódó filozófia az, hogy a dolgok minimálisak és elegánsak legyenek, így a fejlesztők könnyedén kezelhetik az alkalmazás állapotát. Egyszerű és intuitív megközelítést alkalmazva a Pinia lehetővé teszi, hogy a legfontosabbra összpontosítson, és kivételes felhasználói élményt biztosítson a Vue alkalmazás elkészítésekor.

Core Pinia fogalmak

Ahhoz, hogy a legtöbbet hozhassa ki Piniából, elengedhetetlen annak alapfogalmak megértése.

Getterek

A piniai Getterek felelősek bizonyos értékek kinyeréséért és visszaküldéséért az áruház állapotából. A getterek meghatározásával hatékonyan érheti el és dolgozhatja fel az adatokat anélkül, hogy közvetlenül manipulálná a mögöttes állapotot. Gondoljon rájuk úgy, mint az üzlet állapotára szabott számított tulajdonságokra.

Akciók

A műveletek döntő szerepet játszanak a Piniában, lehetővé téve az áruház állapotának módosítását aszinkron vagy szinkron műveletek végrehajtásával. Hidat képeznek az alkalmazás összetevői és az áruház között, biztosítva, hogy az állapotmutációk előre látható mintákat követjenek, és betartsák a legjobb gyakorlatokat.

Bolt

Az üzlet a Pinia szívét képviseli, magában foglalja az alkalmazás állapotát, gettereit, műveleteit és mutációit (ha vannak). Az igazság egyetlen forrásaként működik, az alkalmazás állapotát központosítva és könnyen elérhetővé téve az összetevők között.

Állapot

Az állapot az üzlet által kezelt adatokra utal. Ezek azok a reaktív adatok, amelyekre az összetevők támaszkodnak, hogy a legfrissebb információkat jelenítsék meg a felhasználó számára. Az áruházon belüli állapotobjektum használatával zökkenőmentesen kezelheti és megoszthatja az adatokat az összetevők között.

Mi a helyzet a Vuex-szel?

Kíváncsi lehet, hogyan viszonyul a Pinia a Vuexhez, amely már jó ideje a Vue fejlesztői számára az állami felügyeleti könyvtár. Míg a Vuex kétségtelenül robusztus és erőteljes megoldás, a Pinia egy modernebb és minimalistább megközelítéssel tűnik ki.

Pinia a Vue reaktivitási rendszerét használja az állapotok kezelésére, elkerülve a külső függőségek szükségességét. Ez azt jelenti, hogy a Pinia ökoszisztéma koncentráltabb, és elkerüli az esetleges felfúvódást. Ezenkívül az általa biztosított szigorú gépelési és TypeScript-támogatás lehetővé teszi a hibák észlelését a fejlesztési folyamat korai szakaszában, ami robusztusabb alkalmazásokhoz vezet, kevesebb hibával.

Ha új Vue-projektet indít, vagy a Vuexről való átállást fontolgatja, a Pinia vonzó alternatívát kínál, amely leegyszerűsíti az állapotkezelést a rugalmasság vagy a teljesítmény feláldozása nélkül.

Egyszerű Vue alkalmazás Pinia használatával

Ha mindent meg szeretne tudni a Piniáról, próbáljon meg egy minta alkalmazást készíteni; a alapvető teendőlista-kezelő jó jelölt. A teendőlista-alkalmazások egyszerű szerkezettel rendelkeznek, ahol a felhasználók teendőket adhatnak hozzá, megjelölhetik és jelezhetik azok befejezését, valamint szükség szerint törölhetik és szerkeszthetik a feladatokat. A Pinia biztosítja az ilyen alkalmazások állapotának kezeléséhez szükséges eszközöket.

Előfeltételek

Először is fel kell készítenie a projekthez szükséges környezetet, kezdve a Vue CLI-vel.

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

Ebben a szakaszban a terminálon láthatja, hogy ki kell választania egy előre beállított beállítást. A kiválasztással folytathatja Vue 3 az alapértelmezett beállításokból; ez a példa fog folytassa a Vue 3 használatát.

Most telepítheti a Piniát a projekt mappájába:

cd pinia-todo-app
npm install pinia

Állítsa be a fájlokat

Csak néhány fájlt kell szerkesztenie a mintaprojekt befejezéséhez.

Először hozzon létre egy nevű fájlt store.js alatt src mappát. Ez a fájl tárolja, hozzáadja és törli azokat a tételeket, amelyeket felvesz a teendők listájára. Mindezt a Pinia alapkoncepcióival fogja megtenni.

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

De természetesen ez a fájl önmagában nem elég. Össze kell kapcsolni a store.js fájllal App.vue. Ehhez módosítsa a src/App.vue fájl a következőképpen:

// src/App.vue