Налаштування 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 для фільтрів — дані скидаються при закритті вкладки, не накопичуються застарілі значення.

DevTools і налагодження

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

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