Developer

Pinia: Options и Setup stores

↑ 5.2 Состояние: Pinia, SSOT, Vue Query · ← Предыдущая · → Следующая

Обязательно~3 мин чтенияУровень: middle

Зачем это на собесе

Два стиля определения стора и когда какой выбрать.

Объяснение

Options store — объект с state/getters/actions (см. предыдущую тему). Setup store — функция, как <script setup>: ref = state, computed = getters, функции = actions.

export const useCartStore = defineStore("cart", () => {
  const items = ref<CartItem[]>([]);
  const total = computed(() => items.value.reduce((s, i) => s + i.price * i.qty, 0));
  const count = computed(() => items.value.length);
 
  function add(item: CartItem) {
    const ex = items.value.find(i => i.id === item.id);
    if (ex) ex.qty += item.qty; else items.value.push(item);
  }
  const remove = (id: number) => (items.value = items.value.filter(i => i.id !== id));
  const { data } = useQuery(...);                              // можно использовать composables, watch, inject
 
  watch(items, (v) => localStorage.setItem("cart", JSON.stringify(v)), { deep: true });
  return { items, total, count, add, remove };                  // вернуть всё, что должно быть публичным
});
КритерийOptionsSetup
Порог входаниже, привычно для Vuexкак Composition API
Гибкостьограниченаполная: composables, watchers, provide/inject
Приватностьнетнесвозвращаемое — приватное
Типизацияхорошаяотличная
$reset()встроенне поддерживается (реализуйте сами)
Правиланужно вернуть все state-ref, иначе SSR/DevTools ломаются

Рекомендации: Setup store — для сложной логики и переиспользования composables; Options — для простых сторов и команд, привыкших к структуре. Смешивать стили в проекте допустимо, но лучше единообразие.

Сторы должны быть небольшими и предметно-ориентированными (auth, cart, ui, settings).

Нюансы и подводные камни

  • В setup-сторе нужно вернуть все ref/reactive состояния, иначе они не попадут в devtools/SSR-гидратацию.
  • Нет this: полагайтесь на замыкания.
  • $reset() отсутствует — реализуйте собственный reset().
  • Циклические зависимости между сторами (вызывать внутри actions, не на верхнем уровне).

Практика

  1. Перепишите Options-стор на Setup-стиль.
  2. Добавьте в стор корзины автосохранение через watch.
  3. Реализуйте reset().

Вопросы с ответами

Связанные темы

Вид графа

Обратные ссылки