Як змінювати стан стору Pinia: пряме присвоєння, $patch, $reset і $subscribe?

Question

Accepted Answer

На відміну від Vuex, у Pinia немає мутацій - стан можна змінювати кількома способами.
1. Пряме присвоєння - найпростіше:
const cart = useCartStore();
cart.coupon = 'SALE10';
cart.items.push(item);

2. $patch з об'єктом - кілька полів за раз:
cart.$patch({ coupon: 'SALE10', deliveryMethod: 'courier' });

3. $patch з функцією - для масивів і складних змін:
cart.$patch((state) => {
  state.items = state.items.filter((i) => i.qty > 0);
  state.updatedAt = Date.now();
});

Об'єктна форма для масивів незручна: щоб видалити елемент, довелося б передати весь новий масив. Функція також об'єднує кілька змін в один запис у devtools.
4. Дії - для змін з логікою, перевірками чи запитами до API. Правило: якщо зміна має бізнес-сенс («оформити замовлення»), вона - дія стору, а не набір присвоєнь у компоненті.
$reset() - повернути початковий стан:

в option store вбудований: викликає state() заново;
у setup store його немає - пишуть самі:

export const useFiltersStore = defineStore('filters', () => {
  const initial = () => ({ city: null, salaryFrom: null });
  const filters = ref(initial());

function $reset() {
    filters.value = initial();
  }

return { filters, $reset };
});

$subscribe - реагувати на будь-яку зміну стану:
cart.$subscribe((mutation, state) => {
  localStorage.setItem('cart', JSON.stringify(state.items));
}, { detached: true });

за замовчуванням підписка знімається разом із компонентом; detached: true - лишити;
flush: 'sync' - викликати після кожної зміни, а не раз після групи;
для дій є окремий $onAction - до і після виконання, з обробкою помилок.

Замінити стан повністю - pinia.state.value = {...} (для SSR і тестів), а не cart.$state = ... у звичайному коді.
Докладніше в документації: Pinia: стан

Як змінювати стан стору Pinia: пряме присвоєння, $patch, $reset і $subscribe?

Схожі питання