تتيح لك هذه الإضافة التقاط التغييرات (mutations)/الحالة (state) الخاصة بـ VueX وفحصها لاحقًا أثناء إعادة تشغيل تسجيلات الجلسات. وهذا مفيد جدًا لفهم المشكلات وإصلاحها.

npm i @openreplay/tracker-vuex

قم بتهيئة الحزمة @openreplay/tracker كالمعتاد وحمّل الإضافة فيها. ثم ضع الإضافة المُنشأة في الحقل plugins الخاص بالمتجر (store).

import Vuex from 'vuex'
import trackerVuex from '@openreplay/tracker-vuex';
import { tracker } from '@openreplay/tracker';

tracker.configure({
  projectKey: 'YOUR_PROJECT_KEY',
  ingestPoint: "https://openreplay.mydomain.com/ingest", // when dealing with the self-hosted version of OpenReplay
});

اتبع المثال أدناه إذا كان تطبيقك يعمل بنظام SSR. تأكد من أن المتتبع (tracker) يعمل في بيئة المتصفح. راجع قسم استكشاف الأخطاء وإصلاحها إذا واجهت أخطاء مع SSR.

import Vuex from 'vuex'
import OpenReplay from '@openreplay/tracker/cjs';
import trackerVuex from '@openreplay/tracker-vuex/cjs';
//...
const tracker = new OpenReplay({
  projectKey: PROJECT_KEY,
  ingestPoint: "https://openreplay.mydomain.com/ingest", // when dealing with the self-hosted version of OpenReplay
  // ... options
});

// check list of available options below
const vuexPlugin = tracker.use(trackerVuex(<options>)); 

// add a name to your store, optional (will be randomly generated otherwise)
const storeTracker = vuexPlugin('STORE NAME') 

const store = createStore({
  state,
  mutations,
  plugins: [storeTracker]
})

// check list of available options below
const vuexPlugin = tracker.use(trackerVuex(<options>));  

tracker.start();

const store = new Vuex.Store({
  //...
  plugins: [vuexPlugin],
});

يمكنك تخصيص سلوك الإضافة باستخدام خيارات لتنقية بياناتك. وهي مشابهة للخيارات الموجودة في الإضافة القياسية createLogger.

trackerVuex({
  filter (mutation, state) {
    // returns `true` if a mutation should be logged
    // `mutation` is a `{ type, payload }`
    return mutation.type !== "aBlacklistedMutation";
  },
  transformer (state) {
    // transforms the state before logging it.
    // for example return only a specific sub-tree
    return state.subTree;
  },
  mutationTransformer (mutation) {
    // mutations are logged in the format of `{ type, payload }`
    // we can format it any way we want.
    return mutation.type;
  },
})

إذا كنت تبحث عن مثال عملي حول كيفية استخدام هذه الإضافة لالتقاط تغييرات الحالة في عمليات إعادة تشغيل الجلسات الخاصة بك، فاطّلع على شرحنا التفصيلي هنا.

هل تواجه مشكلة في إعداد هذه الإضافة؟ يُرجى الانضمام إلى Slack الخاص بنا أو زيارة المنتدى للحصول على المساعدة من مجتمعنا.