Увод у Пиниа у Вуе.јс

Кључне Такеаваис

• Пиниа је библиотека за управљање државом за Вуе која доноси једноставност и ефикасност у развој апликација, са фокусом на минимализам и интуитиван приступ.
• Пинијини основни концепти укључују пријемнике, акције, складиште и стање, што омогућава програмерима да ефикасно управљају подацима и деле их у својим компонентама Вуе-а.
• У поређењу са Вуек-ом, Пиниа нуди модернији и минималистички приступ, користећи Вуе-ов систем реактивности и пружајући строго куцање и подршку за ТипеСцрипт за робусније апликације са мање грешака. То је изводљива опција за нове пројекте или миграцију са Вуек-а.

Да ли сте Вуе програмер који жели да поједностави управљање стањем и подигне развој апликације на нове висине? Поздравите Пинију, библиотеку управљања стањем која мења игру за Вуе ентузијасте.

Погледајте корак по корак Пинијине основне концепте и видите како можете да откључате њен потенцијал. Сазнајте како се ова библиотека пореди са Вуек-ом и научите како да направите једноставну апликацију Пиниа.

Шта је Пиниа?

Пиниа је посебно државна библиотека направљен за Вуе, дизајниран да унесе неупоредиву једноставност и ефикасност у ваше Вуе пројекте. Развијена да пружи беспрекорно искуство за Вуе програмере, Пиниа добија инспирацију из најбољих пракси модерно управљање стањем док је изузетно лагано и једноставно за интеграцију у ваше апликације.

Филозофија иза Пиниа-е је да ствари буду минималне и елегантне, чинећи програмерима без напора да управљају стањем апликације. Узимајући једноставан и интуитиван приступ, Пиниа вам омогућава да се фокусирате на оно што је најважније и пружите изузетно корисничко искуство када правите Вуе апликацију.

Основни концепти Пиниа

Да бисте извукли максимум из Пиније, неопходно је разумети њене основне концепте.

Геттерс

Геттери у Пинији су одговорни за издвајање и враћање одређених вредности из стања продавнице. Дефинисањем геттера, можете ефикасно приступити подацима и обрадити их без директног манипулисања основним стањем. Замислите их као израчуната својства прилагођена стању ваше продавнице.

Акције

Акције играју кључну улогу у Пиниа-и, омогућавајући вам да измените стање продавнице извођењем асинхроних или синхроних операција. Они служе као мост између компоненти ваше апликације и продавнице, осигуравајући да мутације стања прате предвидљиве обрасце и да се придржавају најбољих пракси.

Продавница

Продавница представља срце Пиниа-е, обухватајући стање апликације, пријемнике, акције и мутације (ако их има). Делује као јединствен извор истине, држећи стање ваше апликације централизованим и лако доступним кроз ваше компоненте.

Држава

Држава се односи на податке којима ваша продавница управља. То су реактивни подаци на које се ваше компоненте ослањају да би приказале најажурније информације кориснику. Коришћењем објекта стања у оквиру продавнице, можете неприметно управљати подацима и делити их између компоненти.

Шта је са Вуек-ом?

Можда се питате како се Пиниа пореди са Вуек-ом, који је већ неко време била библиотека за управљање стањем за Вуе програмере. Док је Вуек несумњиво робусно и моћно решење, Пиниа се издваја модернијим и минималистичким приступом.

Пиниа користи Вуе-ов систем реактивности за управљање стањем, избегавајући потребу за било каквим спољним зависностима. То значи да је екосистем Пиниа више фокусиран и избегава потенцијално надимање. Поред тога, стриктно куцање и подршка за ТипеСцрипт које пружа омогућавају вам да ухватите грешке рано у процесу развоја, што доводи до робуснијих апликација са мање грешака.

Ако започињете нови Вуе пројекат или размишљате о преласку са Вуек-а, Пиниа нуди атрактивну алтернативу која поједностављује управљање стањем без компромиса у погледу флексибилности или перформанси.

Једноставна Вуе апликација која користи Пиниа

Да бисте сазнали све о Пинији, покушајте да направите пример апликације; а основни менаџер листе обавеза је добар кандидат. Апликација за листу обавеза има једноставну структуру у којој корисници могу да додају задатке, означавају и указују на њихов завршетак, и бришу и уређују послове по потреби. Пиниа пружа алате који су вам потребни за управљање стањем за такве апликације.

Предуслови

Пре свега, потребно је да припремите неопходно окружење за овај пројекат, почевши од Вуе ЦЛИ.

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

У овој фази, можете видети у терминалу да морате да изаберете унапред подешено. Можете наставити тако што ћете изабрати Вуе 3 из подразумеваних подешавања; овај пример ће наставите да користите Вуе 3.

Сада можете да инсталирате Пиниа у фасциклу пројекта:

cd pinia-todo-app
npm install 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);
 },
 },
});

Али, наравно, сама ова датотека није довољна. Потребно је да повежете сторе.јс фајл са Апп.вуе. Да бисте то урадили, промените срц/Апп.вуе фајл на следећи начин:

// src/App.vue