Image du logo de Pinia issue de VueSchool.io
Développement Web

Créer un store avec Vue 3, Pinia et TypeScript

La gestion d’état vous permet d’exécuter une application plus rapidement. Depuis un certain temps, Pinia a remplacé Vuex dans les applications Vue. Avec Pinia, il est temps d’adopter l’API de composition, même au sein des magasins d’état.

Pinia est l’extension de gestion d’état recommandé pour les applications Vue.

Bien que vous puissiez l’utiliser avec la méthode « Option API », si vous utilisez TypeScript, optez pour la méthode « Composition API ».

Oui, même au sein des magasins d’états, vous pouvez utiliser le modèle setup.

Avec JavaScript, vous auriez, par exemple :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

import { ref } from 'vue' ;
import { defineStore } from 'pinia' ;
import useSampleData de '@/composables/useSampleData' ;

const { categoriesData } = useSampleData() ;

export const useCategoryStore = defineStore('CategoryStore', {
  state : {
    categories = ref(categoriesData) ;
  },
  getters : {
    getCategoryById = (categoryId) => {
      const match = this.categories.value.find(
        (category : Category) => category.id === categoryId
      ) ;
      if (match === undefined) return {} ;

      return match ;
    }
  }
}) ;

Avec TypeScript, cela devient :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

import { ref } from "vue" ;
import { defineStore } from "pinia" ;
import useSampleData de "@/composables/useSampleData" ;
import type Category from "@/types/Category" ;

const { categoriesData } = useSampleData() ;

export const useCategoryStore = defineStore("CategoryStore", () => {
  //ÉTAT
  const categories = ref(categoriesData) ;

  //GETTERS
  const getCategoryById = (categoryId : string | undefined) : Catégorie => {
    const match = categories.value.find(
      (category : Category) => category.id === categoryId
    ) ;
    if (match === undefined) return {} ;

    return match ;
  } ;

  return { categories, getCategoryById } ;
}) ;

La fonction fléchée que vous voyez après le nom du magasin utilise la définition de la fonction avec le modèle de configuration.

Remerciements à :