Въведение в Pinia във Vue.js

Ключови изводи

• Pinia е библиотека за управление на състояние за Vue, която внася простота и ефективност в разработката на приложения, с акцент върху минимализма и интуитивния подход.
• Основните концепции на Pinia включват гетери, действия, съхраняване и състояние, които позволяват на разработчиците ефективно да управляват и споделят данни в техните Vue компоненти.
• В сравнение с Vuex, Pinia предлага по-модерен и минималистичен подход, като използва системата за реактивност на Vue и осигурява стриктно въвеждане и поддръжка на TypeScript за по-стабилни приложения с по-малко грешки. Това е жизнеспособна опция за нови проекти или мигриране от Vuex.

Вие сте разработчик на Vue, който иска да рационализира управлението на състоянието си и да издигне разработката на приложението ви до нови висоти? Кажете здравей на Pinia, променящата играта библиотека за управление на състоянието за ентусиастите на Vue.

Разгледайте стъпка по стъпка основните концепции на Pinia и вижте как можете да отключите неговия потенциал. Разберете как тази библиотека се сравнява с Vuex и научете как да създадете просто приложение Pinia.

Какво е Pinia?

Pinia е специално библиотека за държавно управление създаден за Vue, проектиран да внесе несравнима простота и ефективност на вашите Vue проекти. Разработен, за да осигури безпроблемно изживяване за разработчиците на Vue, Pinia се вдъхновява от най-добрите практики на модерно управление на състоянието, като същевременно е изключително леко и лесно за интегриране във вашите приложения.

Философията зад Pinia е нещата да бъдат минимални и елегантни, което улеснява разработчиците да управляват състоянието на приложението. Възприемайки прост и интуитивен подход, Pinia ви позволява да се съсредоточите върху най-важното и да предоставите изключително потребителско изживяване, когато създавате вашето приложение Vue.

Основни концепции на Pinia

За да извлечете максимума от Pinia, важно е да разберете основните му концепции.

Гетъри

Getters в Pinia са отговорни за извличането и връщането на конкретни стойности от състоянието на магазина. Чрез дефиниране на гетери можете ефективно да осъществявате достъп и да обработвате данни, без директно да манипулирате основното състояние. Мислете за тях като за изчислени свойства, съобразени със състоянието на вашия магазин.

Действия

Действията играят решаваща роля в Pinia, като ви позволяват да променяте състоянието на магазина чрез извършване на асинхронни или синхронни операции. Те служат като мост между компонентите на вашето приложение и магазина, като гарантират, че мутациите на състоянието следват предвидими модели и се придържат към най-добрите практики.

Магазин

Магазинът представлява сърцето на Pinia, капсулирайки състоянието, гетерите, действията и мутациите на приложението (ако има такива). Той действа като единствен източник на истина, като поддържа състоянието на вашето приложение централизирано и лесно достъпно във вашите компоненти.

състояние

Състоянието се отнася до данните, които вашият магазин управлява. Вашите компоненти разчитат на реактивните данни, за да покажат най-актуалната информация на потребителя. Като използвате обекта състояние в магазина, можете безпроблемно да управлявате и споделяте данни между компонентите.

Какво ще кажете за Vuex?

Може би се чудите как Pinia се сравнява с Vuex, която е била библиотека за управление на състоянието за разработчиците на Vue от доста време. Докато Vuex несъмнено е стабилно и мощно решение, Pinia се отличава с по-модерен и минималистичен подход.

Pinia използва системата за реактивност на Vue за управление на състоянието, като избягва необходимостта от външни зависимости. Това означава, че екосистемата на Pinia е по-фокусирана и избягва потенциално подуване. В допълнение, стриктното въвеждане и поддръжката на TypeScript, които предоставя, ви позволява да улавяте грешки в началото на процеса на разработка, което води до по-стабилни приложения с по-малко грешки.

Ако стартирате нов Vue проект или обмисляте мигриране от Vuex, Pinia предлага атрактивна алтернатива, която рационализира управлението на състоянието, без да прави компромис с гъвкавостта или производителността.

Обикновено приложение Vue, използващо Pinia

За да научите всичко за Pinia, опитайте да създадете примерно приложение; а основен мениджър на списък със задачи е добър кандидат. Приложението със списък със задачи има проста структура, в която потребителите могат да добавят задачи, да маркират и посочват изпълнението им и да изтриват и редактират задачи, ако е необходимо. Pinia предоставя необходимите инструменти за управление на състоянието за такива приложения.

Предпоставки

На първо място, трябва да подготвите необходимата среда за този проект, като започнете с Vue CLI.

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

На този етап можете да видите в терминала, че трябва да изберете предварително зададена настройка. Можете да продължите, като изберете Версия 3 от настройките по подразбиране; този пример ще продължете да използвате Vue 3.

Сега можете да инсталирате Pinia в папката на вашия проект:

cd pinia-todo-app
npm install pinia

Настройте вашите файлове

Трябва само да редактирате няколко файла, за да завършите този примерен проект.

Първо създайте файл с име store.js под src папка. Този файл ще съдържа, добавя и изтрива елементи, които ще добавите към списъка със задачи. Той ще направи всичко това, използвайки основните концепции на Pinia.

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

Но, разбира се, само този файл не е достатъчен. Трябва да свържете store.js файл с App.vue. За да направите това, променете src/App.vue файл, както следва:

// src/App.vue