Este complemento te permite capturar las mutaciones/el estado de Pinia e inspeccionarlos más tarde mientras reproduces las grabaciones de sesiones. Esto resulta muy útil para comprender y solucionar problemas.

npm i @openreplay/tracker-vuex

Inicializa el paquete @openreplay/tracker como de costumbre y carga el complemento en él. Llama al complemento para configurar el nombre del store; esto devolverá una instancia con nombre del rastreador del store, a la que puedes llamar con tu store de ejemplo como argumento para habilitar el seguimiento de dicho 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)

Puedes personalizar el comportamiento del complemento con opciones para sanear tus datos. Son similares a las del complemento estándar 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 buscas un ejemplo práctico de cómo usar este complemento para capturar los cambios de estado en tus reproducciones de sesiones, consulta nuestro tutorial detallado aquí.

¿Tienes problemas para configurar este complemento? Conéctate a nuestro Slack o consulta nuestro Foro y obtén ayuda de nuestra comunidad.