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 est 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 OpenReplay from '@openreplay/tracker';
import trackerVuex from '@openreplay/tracker-vuex';
//...
const tracker = new OpenReplay({
  projectKey: PROJECT_KEY,
  // ... options 
});

Suivez l’exemple ci-dessous si votre application est en SSR. Assurez-vous que tracker.start() est appelé une fois l’application démarrée (dans useEffect ou componentDidMount). Consultez 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,
  // ... 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 à l’aide d’options afin d’assainir 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 cherchez 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 avez des difficultés à configurer ce plugin ? Rejoignez notre Slack ou consultez notre Forum et obtenez de l’aide auprès de notre communauté.