Єдине сховище даних для Vue-компонентів на сторінках 1С-Бітрікс

Єдине сховище даних для 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 у 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;
    },
  },
});

Стор користувача з даними з 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 для налагодження сторів.

Сценарії використання стору в інтернет-магазині

Що входить у налаштування стору

Ми пропонуємо повний цикл робіт:

• Аналіз поточної архітектури та виявлення вузьких місць
• Проектування структури сторів (кошик, користувач, фільтри, сповіщення)
• Реалізація singleton для кількох Vue-додатків
• Інтеграція з PHP-контролерами Бітрікса (Basket API, дані користувача)
• Налаштування персистентності для фільтрів та обраного
• Покриття коду типами (TypeScript) для надійності
• Тестування на реальних сценаріях (додавання до кошика, зміна користувача)
• Документація з API сторів та передача доступів

Вартість і терміни

Типовий термін налаштування: для проекту без існуючого стору, з 2-3 компонентами, яким потрібні спільні дані (кошик, авторизація, сповіщення) — 1-2 робочі дні, включаючи налаштування персистентності та інтеграцію з PHP-контролерами Бітрікса. Вартість налаштування розраховується індивідуально залежно від складності. Більш складні сценарії (каталог з фільтрацією, багаторівневі права доступу) потребують індивідуальної оцінки.

Замовте налаштування стору — отримайте консультацію з архітектури для вашого проекту. Залиште заявку, і ми підберемо стек та налаштуємо єдиний стор за 1-2 дні. Досвід понад 5 років, гарантія на всі роботи. Зв'яжіться з нами для уточнення деталей вашого проекту.