Pinia est la bibliothèque de gestion d’état qui remplace VueX dans les projets Vue. Là où vous utilisiez auparavant VueX, vous utiliserez désormais Pinia. Avec notre plugin Pinia, vous pouvez garder la trace des changements d’état tout au long du cycle de vie de votre application.

Le plugin peut être installé facilement avec la commande suivante :

npm i @openreplay/tracker-vuex

Pour cet exemple, nous utiliserons une application Vue de démonstration afin de montrer comment ajouter ce plugin et interagir avec lui dans une véritable application.

Remarque : le code source complet de cet exemple se trouve dans ce dépôt GitHub ; allez y jeter un œil si vous avez besoin de plus de détails.

Après avoir installé le plugin, nous modifierons le fichier main.js en ajoutant l’instruction d’import ci-dessous :

import trackerVuex from '@openreplay/tracker-vuex/cjs';

Ensuite, nous utiliserons la fonction startTracker pour instancier le tracker et utiliser le plugin, le tout en une seule fois.

Le résultat de l’appel à cette fonction sera un objet contenant les résultats de l’utilisation de la méthode use avec le plugin.

Remarquez que le nom de la propriété déstructurée est le même que la valeur de la propriété name. Tant que vous gardez ces deux éléments identiques, tout va bien.

const {piniaPlugin} = startTracker({
    projectKey: "<your project key>",
    plugins: [{
        name: 'piniaPlugin',
        fn: trackerVuex
    }]
})

L’étape suivante consiste à créer un wrapper de store nommé que nous utiliserons plus tard pour configurer le plugin sur le store souhaité.

const piniaStoreWrapper = piniaPlugin("products")
saveStore(piniaStoreWrapper)

Le piniaStoreWrapper devra être utilisé plus tard avec le store que nous déciderons de suivre. Cependant, le store n’est pas encore créé à ce stade, nous allons donc l’enregistrer grâce à la fonction saveStore.

Avant d’aller plus loin, examinons les fonctions saveStore et startTracker.

La première fait partie du module storesManager, qui ressemble à ceci :

let storeWrapper = null;

export function saveStore(s) {
    storeWrapper = s;
}

export function getStore(store) {
    return storeWrapper;
}

Ce module nous permettra d’utiliser le piniaStoreWrapper que nous avons créé auparavant, ailleurs.

Quant à la fonction startTracker, le code ressemble à ceci :

export function startTracker(config) {
    console.log("Starting tracker...")

    console.log("Project key used: ", config.projectKey)
    const trackerConfig = {
        projectKey: config.projectKey,
         //ingestPoint: config.ingestPoint,
        __DISABLE_SECURE_MODE: true
    }

    const tracker = new Tracker(trackerConfig);

    const pluginReturns = {}
    config?.plugins.forEach( p => {
        console.log("Using plugin...", p.name)
        pluginReturns[p.name] = tracker.use(p.fn())
    })
 
    tracker.start();
    return {
        tracker,
        ...pluginReturns
    }
}

Cette fonction instancie le tracker avec la configuration que nous lui fournissons. Remarquez que j’ai laissé l’option ingestPoint en commentaire ; c’est parce que nous travaillons directement avec la version SaaS, mais si vous souhaitez utiliser ce code avec une version auto-hébergée, vous devrez la spécifier, et elle devrait ressembler à quelque chose de semblable à ceci : <your-instance>.yourhost/ingest

Une fois que tout le code de configuration est prêt, rendez-vous à l’endroit où vous utilisez le store ; dans le cas de notre exemple, modifions le fichier App.vue pour appeler la fonction getStore, qui renverra le wrapper de store que nous avons enregistré précédemment.

Et nous l’utiliserons pour envelopper le store que nous voulons suivre :

<template>
  <!-- template code -->
</template>

<script lang="ts">
import { computed, defineComponent, onMounted, ref } from 'vue'
import { Product, useProductStore } from './store/products'
import { useCartStore } from './store/cart'
import {getStore} from './store/storesManager.js'

export default defineComponent({
  setup() {
   
    const productStore = useProductStore()
    const loading = ref(true)
    //we get the wrapper here
	  const storeWrapper = getStore()

    onMounted(async () => {
      await productStore.fetchAll()
      loading.value = false
    })

    const cartStore = useCartStore()

		//we wrap the cart store here
    storeWrapper(cartStore)
    return {
      products: computed(() => productStore.list),
      cart: computed(() => cartStore.formattedCart),
      total: computed(() => cartStore.total),
      loading,
      add: (product: Product) => cartStore.add(product),
      remove: (product: Product) => cartStore.remove(product),
    }
  }
})

</script>

Pour examiner les changements d’état pendant la relecture, cliquez sur le nouvel onglet VueX dans le coin inférieur droit :

En cliquant dessus, vous verrez le contenu du store et vous pourrez comprendre comment il change ainsi que les données qui y sont enregistrées :

Remarquez le nom du store : c’est le nom que nous avons utilisé lors du premier appel au plugin Pinia.

Vous pouvez consulter ce dépôt pour obtenir le code source complet d’une application Pinia/Vue fonctionnelle utilisant le plugin Pinia. Si vous rencontrez des problèmes lors de la configuration du plugin Pinia dans votre projet, contactez-nous sur notre communauté Slack et posez vos questions directement à nos développeurs !