Ce plugin vous permet de capturer les mutations/l’état de VueX et de les inspecter ultérieurement lors de la relecture des enregistrements de session. Cela s’avère très utile pour comprendre et corriger les problèmes.

npm i @openreplay/tracker-vuex

Initialisez le paquet @openreplay/tracker comme d’habitude et chargez-y le plugin. Placez ensuite le plugin généré dans le champ plugins de votre 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
});

Suivez l’exemple ci-dessous si votre application est en SSR. Assurez-vous que le tracker s’exécute dans l’environnement du navigateur. Reportez-vous à la section Dépannage si vous rencontrez des erreurs avec le 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],
});

Vous pouvez personnaliser le comportement du plugin avec des options afin d’assainir vos données. Elles sont semblables à celles du plugin standard 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;
  },
})

Si vous recherchez un exemple pratique d’utilisation de ce plugin pour capturer les changements d’état dans vos relectures de session, consultez notre tutoriel détaillé ici.

Vous rencontrez des difficultés pour configurer ce plugin ? Connectez-vous à notre Slack ou consultez notre Forum et obtenez de l’aide auprès de notre communauté.