Настройка Vuex/Pinia для управления состоянием в 1С-Битрикс

Настройка Vuex/Pinia для управления состоянием в 1С-Битрикс

Когда на битриксовой странице работают два и более Vue-компонента, которые должны видеть общие данные — состояние корзины, текущий пользователь, фильтры каталога — нужен единый стор. Без него каждый компонент делает отдельный AJAX-запрос к одному и тому же эндпоинту, данные рассинхронизируются, и добавление товара в корзину в одном компоненте не обновляет счётчик в хедере.

Pinia vs Vuex в проектах 2024+

Для новых проектов на Vue 3 — Pinia. Vuex 4 поддерживается, но официально заменён Pinia. Ключевые отличия в контексте Битрикса:

Pinia не требует мутаций — прямое изменение состояния в action. Отличная TypeScript-поддержка. DevTools работают из коробки. Меньше бойлерплейта.

Vuex оправдан, если проект уже на Vue 2 с Vuex 3, или если команда хорошо знает Vuex и миграция нецелесообразна.

Инициализация стора в контексте Битрикс

Когда несколько 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 — состояние корзины синхронно.

Стор корзины для Битрикс

// 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;
        },
    },
});

Кастомный контроллер на стороне Битрикса обращается к \Bitrix\Sale\Basket::loadItemsForFUser() и возвращает JSON. CSRF-токен (bitrix_sessid()) передаётся из PHP в window.BX_STATE.csrf.

Стор авторизации и пользователя

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-запросов для получения базовой информации о пользователе.

Персистентность состояния

Для данных, которые нужно сохранять между страницами (например, выбранные фильтры каталога), используем pinia-plugin-persistedstate:

pinia.use(piniaPluginPersistedstate);

export const useFiltersStore = defineStore('filters', {
    state: () => ({ selectedBrands: [], priceRange: [0, 100000] }),
    persist: { storage: sessionStorage },
});

sessionStorage предпочтительнее localStorage для фильтров — данные сбрасываются при закрытии вкладки, не накапливаются устаревшие значения.

Девтулз и отладка

Vue DevTools (расширение браузера) показывают состояние всех Pinia-сторов в реальном времени — ключевой инструмент при отладке. На проде Pinia DevTools отключаются автоматически в production-сборке Vite. Логирование мутаций через Pinia $subscribe — для отладки сложных сценариев обновления.

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