Єдине сховище даних для Vue-компонентів на сторінках 1С-Бітрікс
Коли на бітріксовій сторінці працюють два і більше Vue-компоненти, які повинні бачити спільні дані — стан кошика, поточний користувач, фільтри каталогу — потрібен єдиний стор?
Без нього кожен компонент робить окремий AJAX-запит до того самого ендпоінта. При 5+ компонентах кількість запитів зростає в геометричній прогресії: для типового каталогу з 10 000 товарів кожен компонент робить по 3 запити, разом 15 запитів тільки на завантаження. Дані розсинхронізуються, додавання товару до кошика в одному компоненті не оновлює лічильник у хедері. Такі проблеми швидко накопичуються. Ми займаємося цим більше 5 років — понад 60 проектів на Бітріксі. Вирішуємо грамотною архітектурою стору. Використовуємо PHP 8.1+, інфоблоки v2.0, ORM та сучасний frontend на Vue 3 з Pinia. Отримайте консультацію з архітектури стору для вашого проекту.
Чому Pinia — вибір для нових проектів на Vue 3?
Для нових проектів на Vue 3 — Pinia. Vuex 4 підтримується, але офіційно замінений Pinia. Ключові відмінності в контексті Бітрікса:
| Критерій | Pinia | Vuex |
|---|---|---|
| Мутації | Не потрібні — пряма зміна state | Обов'язкові через mutations |
| TypeScript | Відмінна підтримка, типи виводяться | Потрібна ручна типізація |
| DevTools | З коробки, повна інтеграція | Через плагін, гірше працює з Vue 3 |
| Бойлерплейт | Мінімум: defineStore + actions | Більше коду: state, getters, mutations, actions |
| Розмір | ~1 KB | ~9 KB |
| Підтримка Composition API | Так | Обмежена |
| Підтримка SSR | Так | Так, але складніше |
Pinia швидше за Vuex у 9 разів за розміром бандла (1 KB vs 9 KB), що прискорює початкове завантаження сторінки. Vuex виправданий, якщо проект вже на Vue 2 з Vuex 3, або якщо команда добре знає Vuex і міграція недоцільна. В інших випадках Pinia знижує час розробки на 20-30%. Офіційна документація Vuex підтверджує, що Pinia — рекомендоване рішення для нових проектів.
Як ініціалізувати Pinia для кількох Vue-додатків на одній сторінці?
Коли кілька Vue-додатків монтуються на різні елементи сторінки (кошик у хедері та блок товару внизу — різні createApp()), вони не розділяють стор автоматично?
Рішення — singleton через window:
// store/index.js import { createPinia } from 'pinia'; const pinia = window.__pinia || (window.__pinia = createPinia()); export default pinia; // В кожному app.js import pinia from './store/index.js'; const app = createApp(Component); app.use(pinia); app.mount('#mount-point'); Обидва Vue-додатки використовують один і той самий екземпляр Pinia — стан кошика синхронний. Гарантуємо, що цей підхід працює навіть при 10+ одночасних компонентах на сторінці.
Реалізація стору кошика
// stores/cart.js import { defineStore } from 'pinia'; export const useCartStore = defineStore('cart', { state: () => ({ items: [], loading: false, initialized: false, }), getters: { totalCount: (state) => state.items.reduce((sum, i) => sum + i.quantity, 0), totalPrice: (state) => state.items.reduce((sum, i) => sum + i.price * i.quantity, 0), }, actions: { async init() { if (this.initialized) return; this.loading = true; const res = await fetch('/api/v1/cart/'); this.items = await res.json(); this.initialized = true; this.loading = false; }, async addItem(productId, quantity = 1) { const res = await fetch('/api/v1/cart/add/', { method: 'POST', headers: { 'X-Bitrix-Csrf-Token': window.BX_STATE.csrf }, body: JSON.stringify({ productId, quantity }), }); const updated = await res.json(); this.items = updated.items; }, }, }); Докладніше про CSRF-токен
Кастомний контролер на стороні Бітрікса звертається до `\Bitrix\Sale\Basket::loadItemsForFUser()` і повертає JSON. CSRF-токен (`bitrix_sessid()`) передається з PHP у `window.BX_STATE.csrf`. Докладніше про CSRF в офіційній документації.Стор користувача з даними з PHP
export const useUserStore = defineStore('user', { state: () => ({ id: window.BX_STATE?.userId || null, groups: window.BX_STATE?.userGroups || [], priceTypeId: window.BX_STATE?.priceTypeId || 1, }), getters: { isAuthorized: (state) => !!state.id, isWholesale: (state) => state.groups.includes(WHOLESALE_GROUP_ID), }, }); Дані користувача ініціалізуються з window.BX_STATE, який формується в PHP один раз при завантаженні сторінки. Жодних AJAX-запитів для отримання базової інформації про користувача — це прискорює завантаження на 100-200 мс.
Персистентність стану
Для даних, які потрібно зберігати між сторінками (наприклад, вибрані фільтри каталогу), використовуємо pinia-plugin-persistedstate:
pinia.use(piniaPluginPersistedstate); export const useFiltersStore = defineStore('filters', { state: () => ({ selectedBrands: [], priceRange: [0, 100000] }), persist: { storage: sessionStorage }, }); sessionStorage краще за localStorage для фільтрів — дані скидаються при закритті вкладки, не накопичуються застарілі значення. При роботі з каталогами в 5000+ товарів це критично.
Девтулзи та налагодження
Для налагодження Pinia стору використовуйте Vue DevTools — розширення браузера, яке показує стан усіх сторів у реальному часі. На production-збірці DevTools автоматично вимикаються. Також можна логувати мутації через $subscribe — це допомагає в складних сценаріях оновлення. Wikipedia детально описує можливості Vue DevTools для налагодження сторів.
Сценарії використання стору в інтернет-магазині
| Сценарій | Без стору | Зі стором |
|---|---|---|
| Завантаження кошика | 3-5 запитів на сторінку | 1 запит, кешування |
| Оновлення лічильника | Потрібна ручна подія | Автоматичне через гетери |
| Фільтрація каталогу | Перезавантаження сторінки | Миттєвий відгук |
| Дані користувача | AJAX на кожен компонент | Один раз з PHP |
Що входить у налаштування стору
Ми пропонуємо повний цикл робіт:
- Аналіз поточної архітектури та виявлення вузьких місць
- Проектування структури сторів (кошик, користувач, фільтри, сповіщення)
- Реалізація singleton для кількох Vue-додатків
- Інтеграція з PHP-контролерами Бітрікса (Basket API, дані користувача)
- Налаштування персистентності для фільтрів та обраного
- Покриття коду типами (TypeScript) для надійності
- Тестування на реальних сценаріях (додавання до кошика, зміна користувача)
- Документація з API сторів та передача доступів
Вартість і терміни
Типовий термін налаштування: для проекту без існуючого стору, з 2-3 компонентами, яким потрібні спільні дані (кошик, авторизація, сповіщення) — 1-2 робочі дні, включаючи налаштування персистентності та інтеграцію з PHP-контролерами Бітрікса. Вартість налаштування розраховується індивідуально залежно від складності. Більш складні сценарії (каталог з фільтрацією, багаторівневі права доступу) потребують індивідуальної оцінки.
Замовте налаштування стору — отримайте консультацію з архітектури для вашого проекту. Залиште заявку, і ми підберемо стек та налаштуємо єдиний стор за 1-2 дні. Досвід понад 5 років, гарантія на всі роботи. Зв'яжіться з нами для уточнення деталей вашого проекту.