Единое хранилище данных для 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 лет, гарантия на все работы. Свяжитесь с нами для уточнения деталей вашего проекта.