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

npm i @openreplay/tracker-vuex

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

import Vuex from 'vuex'
import OpenReplay from '@openreplay/tracker';
import trackerVuex from '@openreplay/tracker-vuex';
//...
const tracker = new OpenReplay({
  projectKey: PROJECT_KEY,
  // ... options 
});

اتبع المثال أدناه إذا كان تطبيقك يعتمد على SSR. تأكد من استدعاء tracker.start() بمجرد بدء تشغيل التطبيق (في useEffect أو componentDidMount). راجع قسم استكشاف الأخطاء وإصلاحها إذا واجهت أخطاء مع 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,
  // ... 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 الخاص بنا أو زيارة المنتدى والحصول على المساعدة من مجتمعنا.