Ce plugin vous permet de capturer les mutations/l’état de Pinia et de les inspecter ultérieurement lors de la relecture des enregistrements de sessions. C’est très utile pour comprendre et corriger les problèmes.

npm i @openreplay/tracker-vuex

Initialisez le package @openreplay/tracker comme d’habitude et chargez-y le plugin. Appelez le plugin pour configurer le nom du store ; cela renverra une instance nommée de traqueur de store que vous pouvez appeler avec votre store d’exemple comme argument pour activer le suivi de ce 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';

//...

const tracker = new OpenReplay({
  projectKey: PROJECT_KEY
  // ... options
});

// ...

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)

Vous pouvez personnaliser le comportement du plugin avec des options pour nettoyer vos données. Elles sont similaires à 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 sessions, 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é.