Questo plugin ti consente di catturare le mutazioni e lo stato di Pinia 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. Chiama il plugin per impostare il nome dello store: restituirà un’istanza di tracker con nome per lo store, che potrai richiamare passando come argomento la tua istanza dello store per abilitarne il tracciamento.

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)

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.