intermediate

Pinia

Используйте setup или option stores для общего состояния Vue: actions, getters, plugins и SSR-safe hydration.

Pinia — рекомендуемый store Vue: `defineStore` в option или setup синтаксисе. state, getters (computed) и actions (sync/async) держат domain logic вне компонентов.

					export const useCartStore = defineStore('cart', () => {
  const items = ref([]);
  const total = computed(() => items.value.reduce((s, i) => s + i.price, 0));
  function add(item) { items.value.push(item); }
  return { items, total, add };
});
				

Плагины добавляют persist, логи или SSR hydration. Один store на domain boundary, не один глобальный мешок.

На интервью: Pinia vs Vuex (без mutations boilerplate), setup vs option stores, SSR `pinia.state.value`.

Типовые ошибки: глобальные эфемерные UI-флаги, actions молча мутируют несколько store, persist сохраняет токены небезопасно.

Компромисс: простая глобальная координация против стоимости отладки, когда много фич делят один store.

Чеклист:

  • Store по домену, не по компоненту.
  • Actions владеют async и side effects.
  • getters для производных данных.
  • SSR hydration и client takeover.