Преимущества Pinia по сравнению с Vuex

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

Вы, наверное, уже слышали, что Pinia — это официально признанная библиотека управления состоянием для Vue.js. Эван Вы даже называли его де-факто Vuex 5. Но знаете ли вы, почему вы должны использовать Pinia вместо Vuex и как использовать Pinia? В этой статье мы объясним, почему в битве между Vuex и Pinia Pinia является явным победителем в управлении состоянием вашего приложения Vue. Но сначала давайте заложим основу и ответим на некоторые распространенные вопросы.

Кто создал Пинию?

Pinia была создана Эдуардо Сан Мартином Мороте, тем же членом команды Vue Core, который создал Vue Router.

Работает ли Pinia с Vue 2 и Vue 3?

Да, Pinia совместима с обеими основными версиями платформы Vue.js.

Как Pinia сравнивается с Vuex?

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

1. У Pinia более простой API, чем у Vuex

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

Пример пинии

Давайте посмотрим на пример Pinia. Чтобы настроить и установить Pinia в вашем приложении Vue, просто выполните следующую команду в своем терминале:

yarn add pinia
# or with npm
npm install pinia

Обновите свой main.js, чтобы использовать Pinia:

import { createApp } from "vue";
import { createPinia } from "pinia";
import App from "./App.vue";
const app = createApp(App);
app.use(createPinia());
app.mount("#app");

Создайте папку stores под src и создайте файл с именем counter.js и вставьте в него следующий код:

📁src/stores/counter.js

import { defineStore } from "pinia";
export const useCounterStore = defineStore("counter", {
  state: () => {
    return { count: 0 };
  },
  actions: {
    increment(value = 1) {
      this.count += value;
    },
  },
  getters: {
    doubleCount: (state) => {
      return state.count * 2;
    },
    doublePlusOne() {
      return this.doubleCount + 1
    },
  },
});

Несколько вещей, которые следует отметить из приведенного выше кода:

Мутации полностью исключены из цикла управления состоянием. Состояние Pinia может быть обновлено непосредственно в наших действиях, тем самым уменьшив многословность.
Действия Pinia больше не нуждаются в дополнительных аргументах, таких как контекст. Вы также можете подписаться на действия, чтобы наблюдать за их результатом с помощью store.$onAction()
Геттеры Pinia, которые полагаются на других геттеров для работы (т.е. doublePlusOne полагаются на doubleCount), могут получить доступ ко всему экземпляру хранилища, используя this. Однако при использовании Pinia с TypeScript необходимо определить тип возврата из-за известного ограничения TS, которое не влияет на геттеры, определенные с помощью стрелочной функции, а также на геттеры, не использующие this.

Эти изменения делают наш код Pinia намного проще для чтения и понимания по сравнению с его аналогом Vuex.

2. Pinia имеет модульную конструкцию

Vuex предоставляет вам только одно хранилище, в котором может быть несколько модулей. В то время как в Pinia вы можете создавать несколько хранилищ, которые можно импортировать в компоненты непосредственно там, где они необходимы. Это позволяет сборщикам лучше разделять код и обеспечивает лучшие выводы TypeScript.

Наличие нескольких хранилищ вместо одного также упрощает разработку, поскольку каждый раз необходимо использовать только методы Pinia Store (или модуля), а не все хранилище в Vuex.

Использование описанного ранее примера Pinia в одном файловом компоненте будет выглядеть примерно так:

<script setup>
import { useCounterStore } from "./stores/counter";
const store = useCounterStore();
</script>
<template>
<h1>Count is {{ store.count }}</h1>
<h2>Double is {{ store.doubleCount }}</h2>
<button @click="store.increment()">Increment</button>
</template>

3. Pinia поставляется с Devtools

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

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

4. В Pinia встроена поддержка Typescript

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

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

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

Пример Pinia с магазином TypeScript:

interface ToDoItem {
  item: string;
  id: number;
  done: boolean;
}
export const useTodoStore = defineStore('ToDoStore', {
  state: () => ({
    todos:[] as ToDoItem[]
  }),
  actions: {
    addTodo(item: string) {
    this.todos.push({ item, id: this.id++, done: false })
    }
  }
})

Должен ли я использовать Pinia или Vuex?

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

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

Если вы хотите узнать, как перейти с Vuex на Pinia, ознакомьтесь с этим курсом, который преподает член команды Vue Core Бен Хонг. Вы также можете посмотреть информативную сессию вопросов и ответов с Эдуардо Сан Мартином (создателем Pinia), где он отвечает на некоторые действительно интересные вопросы о Pinia и государственном управлении в целом. Он также демонстрирует в живом учебном пособии, как вы можете сохранять состояние в Pinia, используя локальное хранилище с компонуемым useLocalStorage из VueUse.

Pinia быстро укрепляет свое место в сообществе Vue, и мы считаем, что эти курсы — лучший способ начать работу с Pinia.

Первоначально опубликовано на https://www.vuemastery.com 6 июня 2022 г.

Преимущества Pinia по сравнению с Vuex