Wprowadzenie do Pinia w Vue.js

Kluczowe dania na wynos

• Pinia to biblioteka zarządzania stanem dla Vue, która zapewnia prostotę i wydajność tworzenia aplikacji, z naciskiem na minimalizm i intuicyjne podejście.
• Podstawowe koncepcje Pinia obejmują moduły pobierające, akcje, przechowywanie i stan, które umożliwiają programistom efektywne zarządzanie i udostępnianie danych w ich komponentach Vue.
• W porównaniu do Vuex, Pinia oferuje bardziej nowoczesne i minimalistyczne podejście, wykorzystując system reaktywności Vue i zapewniając ścisłą obsługę pisania i TypeScript dla bardziej niezawodnych aplikacji z mniejszą liczbą błędów. Jest to realna opcja dla nowych projektów lub migracji z Vuex.

Czy jesteś programistą Vue, który chce usprawnić zarządzanie stanem i przenieść tworzenie aplikacji na nowy poziom? Przywitaj się z Pinią, przełomową biblioteką zarządzania stanem dla entuzjastów Vue.

Przyjrzyj się krok po kroku podstawowym koncepcjom Pinia i zobacz, jak możesz uwolnić jej potencjał. Dowiedz się, jak ta biblioteka wypada w porównaniu z Vuex i dowiedz się, jak stworzyć prostą aplikację Pinia.

Co to jest Pinia?

Pinia jest specjalnie zarządzaną biblioteką państwową stworzone dla Vue, zaprojektowany, aby zapewnić niezrównaną prostotę i wydajność Twoim projektom Vue. Opracowany, aby zapewnić bezproblemową obsługę programistom Vue, Pinia czerpie inspirację z najlepszych praktyk nowoczesne zarządzanie stanem, będąc jednocześnie niezwykle lekkim i łatwym do zintegrowania z aplikacjami.

Filozofia stojąca za Pinia polega na zachowaniu minimalizmu i elegancji, dzięki czemu programiści mogą bez wysiłku zarządzać stanem aplikacji. Przyjmując proste i intuicyjne podejście, Pinia pozwala skupić się na tym, co najważniejsze i zapewnić wyjątkowe wrażenia użytkownika podczas tworzenia aplikacji Vue.

Podstawowe koncepcje Pinia

Aby w pełni wykorzystać Pinię, konieczne jest zrozumienie jej podstawowych pojęć.

Pobieracze

Gettery w Pinia są odpowiedzialne za wydobywanie i zwracanie określonych wartości ze stanu sklepu. Definiując moduły pobierające, można wydajnie uzyskiwać dostęp do danych i przetwarzać je bez bezpośredniego manipulowania stanem bazowym. Pomyśl o nich jako o obliczonych właściwościach dostosowanych do stanu Twojego sklepu.

działania

Kluczową rolę w Pini odgrywają akcje, które umożliwiają modyfikację stanu sklepu poprzez wykonywanie operacji asynchronicznych lub synchronicznych. Służą one jako pomost między komponentami aplikacji a sklepem, zapewniając, że mutacje stanu są zgodne z przewidywalnymi wzorcami i najlepszymi praktykami.

Sklep

Sklep reprezentuje serce Pinia, obejmując stan aplikacji, moduły pobierające, akcje i mutacje (jeśli występują). Działa jako pojedyncze źródło prawdy, dzięki czemu stan aplikacji jest scentralizowany i łatwo dostępny we wszystkich komponentach.

Państwo

Stan odnosi się do danych, którymi zarządza Twój sklep. To reaktywne dane, na których opierają się Twoje komponenty, aby wyświetlać użytkownikowi najbardziej aktualne informacje. Korzystając z obiektu stanu w sklepie, możesz bezproblemowo zarządzać danymi i udostępniać je między komponentami.

Co z Vuexem?

Być może zastanawiasz się, jak Pinia wypada w porównaniu z Vuex, która od dłuższego czasu jest biblioteką zarządzania stanem dla programistów Vue. Podczas gdy Vuex jest niewątpliwie solidnym i wydajnym rozwiązaniem, Pinia wyróżnia się bardziej nowoczesnym i minimalistycznym podejściem.

Pinia wykorzystuje system reaktywności Vue do zarządzania stanem, unikając potrzeby jakichkolwiek zewnętrznych zależności. Oznacza to, że ekosystem Pinia jest bardziej skoncentrowany i unika potencjalnego wzdęcia. Ponadto ścisła obsługa typowania i języka TypeScript umożliwia wychwytywanie błędów na wczesnym etapie procesu programowania, co prowadzi do bardziej niezawodnych aplikacji z mniejszą liczbą błędów.

Jeśli rozpoczynasz nowy projekt Vue lub rozważasz migrację z Vuex, Pinia oferuje atrakcyjną alternatywę, która usprawnia zarządzanie stanem bez uszczerbku dla elastyczności lub wydajności.

Prosta aplikacja Vue wykorzystująca Pinia

Aby dowiedzieć się wszystkiego o Pini, spróbuj zbudować przykładową aplikację; A podstawowy menedżer listy rzeczy do zrobienia jest dobrym kandydatem. Aplikacja listy rzeczy do zrobienia ma prostą strukturę, w której użytkownicy mogą dodawać zadania do wykonania, oznaczać i wskazywać ich wykonanie oraz usuwać i edytować zadania w razie potrzeby. Pinia zapewnia narzędzia potrzebne do zarządzania stanem takich aplikacji.

Wymagania wstępne

Przede wszystkim musisz przygotować niezbędne środowisko dla tego projektu, zaczynając od Vue CLI.

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

Na tym etapie możesz zobaczyć w terminalu, że musisz wybrać ustawienie wstępne. Możesz kontynuować, wybierając Vue 3 z ustawień domyślnych; ten przykład będzie kontynuuj używanie Vue 3.

Teraz możesz zainstalować Pinię w swoim folderze projektu:

cd pinia-todo-app
npm install pinia

Skonfiguruj swoje pliki

Wystarczy edytować kilka plików, aby ukończyć ten przykładowy projekt.

Najpierw utwórz plik o nazwie sklep.js pod źródło teczka. Ten plik będzie przechowywać, dodawać i usuwać elementy, które dodasz do listy rzeczy do zrobienia. Zrobi to wszystko przy użyciu podstawowych koncepcji 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);
 },
 },
});

Ale oczywiście sam ten plik nie wystarczy. Musisz połączyć tzw sklep.js plik z Aplikacja. vue. Aby to zrobić, zmień src/App.vue plik w następujący sposób:

// src/App.vue