+
+ This plugin allows you to capture Pinia mutations + state and inspect them later on while
+ replaying session recordings. This is very useful for understanding and fixing issues.
+
+
+
Installation
+
{`npm i @openreplay/tracker-vuex --save`}
+
+
Usage
+
+ Initialize the @openreplay/tracker package as usual and load the plugin into it. Then put
+ the generated plugin into your plugins field of your store.
+
+
+
+
+ {`import Vuex from 'vuex'
+import OpenReplay from '@openreplay/tracker';
+import trackerVuex from '@openreplay/tracker-vuex';
+//...
+const tracker = new OpenReplay({
+ projectKey: '${projectKey}'
+});
+tracker.start();
+//...
+const examplePiniaStore = useExamplePiniaStore()
+// check list of available options below
+const vuexPlugin = tracker.use(trackerVuex())
+// add a name to your store, optional
+//(will be randomly generated otherwise)
+const piniaStorePlugin = vuexPlugin('STORE NAME')
+
+// start tracking state updates
+piniaStorePlugin(examplePiniaStore)
+// now you can use examplePiniaStore as
+// usual pinia store
+// (destructure values or return it as a whole etc)
+`}
+
+ }
+ second={
+
+ {`import Vuex from 'vuex'
+import OpenReplay from '@openreplay/tracker/cjs';
+import trackerVuex from '@openreplay/tracker-vuex/cjs';
+//...
+const tracker = new OpenReplay({
+ projectKey: '${projectKey}'
+});
+//...
+
+// start tracker when the app is mounted
+tracker.start();
+
+//...
+const examplePiniaStore = useExamplePiniaStore()
+// check list of available options below
+const vuexPlugin = tracker.use(trackerVuex())
+// add a name to your store, optional
+// (will be randomly generated otherwise)
+const piniaStorePlugin = vuexPlugin('STORE NAME')
+
+// start tracking state updates
+piniaStorePlugin(examplePiniaStore)
+// now you can use examplePiniaStore as
+// usual pinia store
+// (destructure values or return it as a whole etc)
+}`}
+
+ }
+ />
+
+
+