Questo plugin ti consente di catturare le mutazioni e lo stato di VueX e di ispezionarli in seguito durante la riproduzione delle registrazioni delle sessioni. È molto utile per comprendere e risolvere i problemi.

npm i @openreplay/tracker-vuex

Inizializza il pacchetto @openreplay/tracker come al solito e carica al suo interno il plugin. Poi inserisci il plugin generato nel campo plugins del tuo 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
});

Segui l’esempio qui sotto se la tua app usa l’SSR. Assicurati che il tracker venga eseguito nell’ambiente del browser. Se riscontri errori con l’SSR, consulta la sezione Risoluzione dei problemi.

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],
});

Puoi personalizzare il comportamento del plugin con delle opzioni per sanificare i tuoi dati. Sono simili a quelle del 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;
  },
})

Se cerchi un esempio pratico di come usare questo plugin per catturare le modifiche di stato nelle registrazioni delle tue sessioni, dai un’occhiata al nostro tutorial dettagliato qui.

Hai difficoltà a configurare questo plugin? Unisciti al nostro Slack e ricevi aiuto dalla nostra community.