Що таке Pinia і чим option store відрізняється від setup store?

Pinia - офіційний стор для Vue: спільний стан, до якого мають доступ будь-які компоненти без передачі props через десять рівнів. Наступник Vuex, без мутацій і з повною підтримкою TypeScript.

Option store - схожий на Options API:

import { defineStore } from 'pinia';

export const useCartStore = defineStore('cart', {
  state: () => ({ items: [] }),
  getters: {
    total: (state) => state.items.reduce((sum, item) => sum + item.price * item.qty, 0),
  },
  actions: {
    add(product) {
      this.items.push({ ...product, qty: 1 });
    },
  },
});

Setup store - функція в стилі Composition API:

export const useCartStore = defineStore('cart', () => {
  const items = ref([]);
  const total = computed(() => items.value.reduce((sum, i) => sum + i.price * i.qty, 0));

  function add(product) {
    items.value.push({ ...product, qty: 1 });
  }

  return { items, total, add };
});

ref стає станом, computed - гетером, функції - діями.

Використання однакове:

<script setup>
const cart = useCartStore();
</script>

<template>
  <span>{{ cart.items.length }} товарів на {{ cart.total }} грн</span>
  <button @click="cart.add(product)">У кошик</button>
</template>

Відмінності:

• setup store гнучкіший: у ньому можна використовувати watch, інші composables, інжектовані значення;
• у setup store треба повернути весь стан - неповернений ref не потрапить у devtools, SSR і плагіни;
• $reset() вбудований лише в option store; у setup store його пишуть вручну;
• option store простіший для новачків і для тих, хто переходить з Vuex.

Перший аргумент defineStore - унікальний id; два стори з однаковим id конфліктують.

Pinia 4 змінила лише збірку: пакет тепер тільки ESM, а @vue/devtools-api встановлюється окремо. API сторів той самий.

Докладніше в документації: Pinia: визначення стору