С легкостью создавайте простые приложения на основе состояния с помощью этой библиотеки JavaScript.

Ключевые выводы

  • Pinia — это библиотека управления состоянием для Vue, которая обеспечивает простоту и эффективность разработки приложений с упором на минимализм и интуитивно понятный подход.
  • Основные концепции Pinia включают геттеры, действия, хранилище и состояние, которые позволяют разработчикам эффективно управлять данными и обмениваться ими в своих компонентах Vue.
  • По сравнению с Vuex, Pinia предлагает более современный и минималистский подход, используя систему реактивности Vue и обеспечивая строгую типизацию и поддержку TypeScript для более надежных приложений с меньшим количеством ошибок. Это жизнеспособный вариант для новых проектов или перехода с Vuex.

Вы разработчик Vue и хотите упростить управление состоянием и вывести разработку приложений на новый уровень? Поздоровайтесь с Pinia, революционной библиотекой управления состоянием для энтузиастов Vue.

Пошагово изучите основные концепции Pinia и узнайте, как вы можете раскрыть ее потенциал. Узнайте, чем эта библиотека отличается от Vuex, и узнайте, как создать простое приложение Pinia.

instagram viewer

Что такое Пиния?

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

Философия Pinia заключается в том, чтобы все было минимальным и элегантным, что позволяет разработчикам легко управлять состоянием приложения. Используя простой и интуитивно понятный подход, Pinia позволяет вам сосредоточиться на самом важном и обеспечить исключительный пользовательский опыт при создании приложения Vue.

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

Чтобы получить максимальную отдачу от Pinia, важно понимать ее основные концепции.

Добытчики

Геттеры в Pinia отвечают за извлечение и возврат определенных значений из состояния хранилища. Определив геттеры, вы можете эффективно получать доступ к данным и обрабатывать их без непосредственного манипулирования базовым состоянием. Думайте о них как о вычисляемых свойствах, адаптированных к состоянию вашего магазина.

Действия

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

Магазин

Хранилище представляет собой сердце Pinia, инкапсулируя состояние приложения, геттеры, действия и мутации (если таковые имеются). Он действует как единый источник достоверной информации, сохраняя состояние вашего приложения централизованным и легко доступным для всех ваших компонентов.

Состояние

Состояние относится к данным, которыми управляет ваш магазин. Это реактивные данные, на которые полагаются ваши компоненты, чтобы отображать самую актуальную информацию для пользователя. Используя объект состояния в хранилище, вы можете беспрепятственно управлять данными и обмениваться данными между компонентами.

Что насчет Векса?

Вам может быть интересно, как 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 под источник папка. Этот файл будет хранить, добавлять и удалять элементы, которые вы будете добавлять в список дел. Все это будет сделано с использованием основных концепций 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. Для этого измените источник/App.vue файл следующим образом:

// src/App.vue