Коли використовувати provide/inject, а коли стор на кшталт Pinia?

provide/inject передає значення від предка до будь-якого нащадка в його піддереві без проміжних props:

// Form.vue
provide('form', { errors, register });

// глибоко вкладений FormField.vue
const form = inject('form');

Pinia - глобальний стор: стан, геттери й дії в окремому модулі, доступні з будь-якого компонента застосунку.

provide/inject доречний, коли:

• стан належить конкретному піддереву, а не всьому застосунку: форма і її поля, таблиця і її колонки, вкладки і їхні панелі;
• таких піддерев може бути кілька одночасно - у кожної форми свій стан, а глобальний стор для цього незручний;
• це бібліотека компонентів, яка не повинна залежати від стору застосунку.

Pinia доречна, коли:

• стан справді глобальний: користувач, кошик, налаштування, кеш даних;
• потрібні DevTools (історія змін, інспекція стану), SSR-гідратація, плагіни (збереження в localStorage);
• з даними працюють непов'язані частини інтерфейсу.

Практичні поради:

• Ключі provide - через Symbol з InjectionKey<T>, а не рядки: без колізій і з типізацією.
• Передавайте через provide реактивні значення (ref, readonly(ref)) і функції для змін - так нащадки не змінюють стан предка напряму.
• Не все треба класти в стор. Стан, що використовує один компонент, лишається в ньому. Дані з сервера часто зручніше тримати в бібліотеці запитів (TanStack Query), а не в Pinia.

Докладніше в документації: Provide / Inject