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 à :
