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

npm i @openreplay/tracker-vuex

قم بتهيئة حزمة @openreplay/tracker كالمعتاد وحمّل الإضافة فيها. استدعِ الإضافة واضبط اسم المتجر (store)، وسيؤدي ذلك إلى إرجاع نسخة مسمّاة من متعقب المتجر يمكنك استدعاؤها مع نسخة متجرك كوسيطة لتمكين تتبع هذا المتجر.

import OpenReplay from '@openreplay/tracker';
import trackerVuex from '@openreplay/tracker-vuex';

import OpenReplay from '@openreplay/tracker/cjs';
import trackerVuex from '@openreplay/tracker-vuex/cjs';

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

// ...

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

const piniaStorePlugin = vuexPlugin('STORE NAME') // add a name to your store, 
                                                  // optional (will be randomly generated otherwise)
piniaStorePlugin(examplePiniaStore) // start tracking state updates

// now you can use examplePiniaStore as usual pinia store (destructure values or return it as a whole etc)

يمكنك تخصيص سلوك الإضافة باستخدام خيارات لتنقية بياناتك. وهي مشابهة لتلك الموجودة في الإضافة القياسية 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 الخاص بنا أو الاطلاع على المنتدى الخاص بنا للحصول على المساعدة من مجتمعنا.