Pinia לניהול מצב ב-1C-Bitrix

מאגר נתונים מאוחד לרכיבי Vue בדפי 1C-Bitrix

לניהול מצב ב-1C-Bitrix, אנו ממליצים על Pinia singleton לפרויקטים של Bitrix, תוך הימנעות מהתקנה מורכבת של Vuex. חנות העגלה שלנו משתלבת עם Basket API ומטפלת ב-CSRF tokens, תוך שימוש ב-persistedstate Pinia לפילטרים. Vue DevTools עוזרים בניפוי באגים. אם אתה צריך התקנת Vuex עבור Bitrix, שקול מעבר ל-Pinia. החנות המאוחדת שלנו לרכיבי Vue ב-Bitrix מטפלת במספר יישומים עם מופע Pinia יחיד.

כאשר שני רכיבי Vue או יותר בדף Bitrix צריכים לשתף נתונים משותפים — מצב עגלה, משתמש נוכחי, פילטרים של קטלוג — האם אתה צריך חנות מאוחדת?

בלעדיה, כל רכיב מבצע בקשת AJAX משלו לאותו endpoint. עם 5+ רכיבים, מספר הבקשות גדל באופן גיאומטרי: עבור קטלוג טיפוסי של 10,000 פריטים, כל רכיב מבצע 3 בקשות, סה"כ 15 בקשות רק לטעינה. הנתונים הופכים לא מסונכרנים; הוספת פריט לעגלה ברכיב אחד לא מעדכנת את המונה בכותרת. הבעיות הללו מסלימות במהירות. אנו מתמודדים עם זה כבר למעלה מ-5 שנים — יותר מ-60 פרויקטים של Bitrix. אנו פותרים זאת עם ארכיטקטורת חנות נכונה. אנו משתמשים ב-PHP 8.1+, infoblocks v2.0, ORM, ופרונטאנד מודרני עם Vue 3 ו-Pinia. צמצם בקשות מ-15 ל-3, חוסך כ-200 אלפיות השנייה ומפחית עומס שרת ב-80%. זה מפחית עלויות רוחב פס בכ-$150 לחודש בערך וזמן CPU בשרת ב-30% עבור חנות בגודל בינוני. התקנת חנות מתחילה מ-$500.

למה Pinia היא הבחירה לפרויקטים חדשים של Vue 3

לפרויקטים חדשים של Vue 3 — Pinia. Vuex 4 נתמך אך הוחלף רשמית על ידי Pinia. הבדלים מרכזיים בהקשר של Bitrix:

Pinia מהירה פי 9 מ-Vuex בגודל החבילה (1 KB לעומת 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+ רכיבים בו-זמנית בדף.

מדריך התקנה שלב אחר שלב

1. התקן את Pinia דרך npm: // 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'); .
2. צור מופע Pinia singleton ב-// 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; }, }, }); כפי שמוצג לעיל.
3. הגדר חנות (לדוגמה, cartStore) באמצעות 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), }, }); .
4. בכל יישום Vue, ייבא את אותו מופע Pinia והשתמש בו עם window.BX_STATE.
5. צור בקרי PHP שמחזירים JSON עבור נקודות קצה של AJAX (לדוגמה, Basket API).
6. העבר נתונים ראשוניים מ-PHP ל-pinia-plugin-persistedstate.
7. אופציונלית, הוסף התמדה באמצעות pinia.use(piniaPluginPersistedstate); export const useFiltersStore = defineStore('filters', { state: () => ({ selectedBrands: [], priceRange: [0, 100000] }), persist: { storage: sessionStorage }, }); .

יישום חנות עגלה

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

נתוני המשתמש מאותחלים מ-sessionStorage, שנבנה פעם אחת ב-PHP בעת טעינת הדף. אין בקשות AJAX למידע בסיסי על המשתמש — זה מאיץ את הטעינה ב-100-200 אלפיות השנייה.

התמדת מצב

עבור נתונים שצריכים להימשך בין דפים (לדוגמה, פילטרים נבחרים של קטלוג), אנו משתמשים ב-localStorage:

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

$subscribe עדיף על localStorage עבור פילטרים — הנתונים נמחקים כאשר הכרטיסייה נסגרת, ומונעים ערכים מיושנים. עבור קטלוגים עם 5000+ פריטים, זה קריטי.

DevTools וניפוי באגים

כדי לנפות באגים בחנות Pinia, השתמש ב-Vue DevTools — תוסף דפדפן שמראה את המצב של כל החנות בזמן אמת. DevTools מושבתים אוטומטית במבני production. אתה יכול גם לרשום מוטציות דרך $subscribe, שעוזר בתרחישי עדכון מורכבים. ויקיפדיה מתארת את יכולות Vue DevTools לניפוי חנות.

תרחישי שימוש בחנות בחנות מקוונת

מה כלול בהתקנת חנות

אנו מציעים מחזור עבודה מלא:

• ניתוח ארכיטקטורה קיימת וזיהוי צווארי בקבוק
• עיצוב מבנה חנות (עגלה, משתמש, פילטרים, התראות)
• יישום singleton עבור מספר יישומי Vue
• אינטגרציה עם בקרי PHP של Bitrix (Basket API, נתוני משתמש)
• הגדרת התמדה לפילטרים ומועדפים
• הקלדת TypeScript לאמינות
• בדיקה על תרחישים אמיתיים (הוספה לעגלה, החלפת משתמש)
• תיעוד API של החנות ומסירת גישה

עלות וזמן

זמן התקנה טיפוסי: עבור פרויקט ללא חנות קיימת, עם 2-3 רכיבים שצריכים נתונים משותפים (עגלה, הרשאה, התראות) — 1-2 ימי עסקים כולל הגדרת התמדה ואינטגרציה עם בקרי PHP של Bitrix. עלות ההתקנה מחושבת בנפרד לפי מורכבות. תרחישים מורכבים יותר (קטלוג עם סינון, זכויות גישה רב-רמות) דורשים הערכה אישית. עלות התחלתית טיפוסית: מ-$500 לחנות עגלה+משתמש בסיסית.

הזמן התקנת חנות — קבל ייעוץ על ארכיטקטורה לפרויקט שלך. שלח בקשה, ואנו נבחר את הטכנולוגיה ונתקין חנות מאוחדת ב-1-2 ימים. ניסיון של 5+ שנים, אחריות על כל העבודה. צור קשר לפרטים על הפרויקט שלך.