PassFront
  1. PassFront
  2. База знаний
  3. Состояние и Pinia

Почему нельзя деструктурировать стор Pinia и как это обойти?

Состояние и Pinia

Деструктуризация состояния из стора превращает реактивные поля в обычные значения, и они перестают обновляться.

Проблема

const cart = useCartStore();
const { items, total } = cart;   // теряем реактивность: items и total — копии

Решение: storeToRefs

import { storeToRefs } from 'pinia';

const cart = useCartStore();
const { items, total } = storeToRefs(cart);  // реактивные ref на state и getters
const { add } = cart;                        // actions можно деструктурировать как есть

storeToRefs создаёт ref только для состояния и геттеров, а функции пропускает.

Почему так

Стор — это reactive-объект. Чтение поля в момент деструктуризации возвращает значение, а не ссылку, и связь с хранилищем рвётся. Это общее правило для reactive.

Коротко для собеседования

Для state и getters используйте storeToRefs, actions можно брать напрямую из стора.

Другие вопросы раздела