Этот плагин позволяет захватывать мутации/состояние 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. Убедитесь, что трекер запускается в окружении браузера. Обратитесь к разделу Устранение неполадок, если у вас возникнут ошибки при использовании 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 или загляните на наш Форум и получите помощь от нашего сообщества.