Все, что вам нужно знать о Pinia в Vue.js
Что такое Пиния?
Pinia — это специфичная для Vue библиотека управления, предназначенная для обеспечения беспрецедентной простоты и эффективности проектов Vue. Pinia вдохновлена лучшим современным управлением и интегрируется в ваше приложение очень легко и просто.
Философия Pinia заключается в том, чтобы свести все к минимуму и сделать все со вкусом, облегчая разработчикам управление своими приложениями. Благодаря интуитивно понятному подходу Pinia позволяет вам сосредоточиться на наиболее распространенных проблемах, обеспечивая при этом исключительный пользовательский опыт при создании приложений Vue.
Основные концепции Pinia
- Геттеры отвечают за извлечение и возврат определенных значений из хранилища. Определив геттеры, вы можете эффективно получать доступ к данным и обрабатывать их без необходимости напрямую настраивать базовый компонент.
- Действия играют важную роль в Pinia, позволяя изменять состояние хранилища, выполняя асинхронные или синхронные операции.
- Магазин — это «сердце» Pinia, инкапсулирующее состояние приложения, геттер, действия и мутации.
- Состояние относится к данным, которыми управляет магазин.
Что такое Векс?
Vuex хорошо известен как мощное решение для управления состоянием. Итак, Pinia по сравнению с Vuex, какой вариант более выдающийся?
Pinia использует реактивную систему Vue для управления состоянием, избегая необходимости во внешних зависимостях. Это означает, что экосистема Pinia более централизована и позволяет избежать потенциальных ошибок в длинном коде. Кроме того, поддержка TypeScript и точная типизация позволяют выявлять ошибки на ранних этапах разработки, что приводит к созданию более полных приложений с меньшим количеством ошибок.
Если вы начинаете новый проект Vue или планируете миграцию Vuex, Pinia — привлекательная альтернатива, которая упрощает управление состоянием без ущерба для гибкости или производительности.
Создайте простое приложение Vue с помощью Pinia
Чтобы лучше понять Pinia, попробуйте создать простое приложение для управления списками дел. Pinia предоставляет инструменты, необходимые для управления состоянием таких приложений.
Необходимые условия
Сначала подготовьте необходимую среду для этого проекта, начиная с Vue CLI.
# Cài Vue CLI: npm install -g @vue/cli # tạo thư mục dự án với Vue CLI: vue create pinia-todo-app
На этом этапе вы видите в терминале, что вам нужно выбрать пресет. Продолжите, выбрав Vue 3 из настроек по умолчанию.
Теперь вы можете установить Pinia в каталог проекта:
cd pinia-todo-app npm установить пинию
Настройка файла
Вам нужно всего лишь отредактировать несколько файлов, чтобы завершить этот пример проекта. Сначала создайте файл с именем store.js в каталоге src. Этот файл будет содержать, добавлять и удалять элементы, которые вы добавляете в свой список дел. Все это будет сделано с использованием основных концепций Pinia.
// src/store.js import { defineStore } из “pinia”; export const useTodoStore = defineStore(“todo”, { state: () => ({ todos: (), }), action: { addTodo(todoText) { this.todos.push({ id: Date.now(), текст: todoText }); }, removeTodo(todoId) { this.todos = this.todos.filter((todo) => todo.id !== todoId); }, }, });
Но, конечно, одного этого файла недостаточно. Вам нужно связать файл store.js с App.vue. Для этого измените файл src/App.vue следующим образом:
// источник/App.vue
Логика здесь довольно проста. События, определенные вами в store.js, будут происходить так, как вы укажете в файле App.vue. Это похоже на то, что файл App.vue будет действовать как ваш механизм управления.
Конечно, таким образом приложение — это еще не все, потому что вы не используете шаблоны или стили. Чтобы добавить их, вы можете отредактировать файл App.vue следующим образом:
// источник/App.vue
- {{ todo.text }}Готово!
Теперь у вас есть все, что вам нужно. Используя основные концептуальные функции Pinia, вы можете проверять статус, добавлять и удалять новые элементы из списка дел по своему усмотрению. Но есть один последний шаг. Вы должны обновить файл main.js в каталоге src и включить необходимые каталоги для приложения.
// src/main.js import { createApp } from “vue”; импортировать { createPinia } из “pinia”; импортировать приложение из “./App.vue”; const pinia = createPinia(); константное приложение = createApp(App); app.use (пиния); app.mount(“#приложение”);
Все необходимое для тестирования приложения готово.
Запустите образец приложения Pinia
Чтобы увидеть результаты этого простого, но поучительного списка дел, используйте следующую команду:
npm запустить служить
Вы увидите чистый, простой интерфейс для добавления и удаления задач:
В целом, Pinia — ценный инструмент, когда вам нужен плавный и эффективный поток данных в вашем приложении. Предлагая модульную, безопасную и быстро реагирующую архитектуру, Pinia упрощает управление состоянием и повышает эффективность работы.
