Démarrage rapide de Pinia

Préface

Vue3 est lancé depuis longtemps et l'écologie qui l'entoure devient de plus en plus complète. Lorsque nous utilisions Vue2 auparavant, Vuex était un incontournable. En tant qu'outil de gestion d'état, il nous apportait une grande commodité. Après le lancement de Vue3, bien que beaucoup de choses aient changé par rapport à Vue2, les éléments fondamentaux sont restés les mêmes, comme la gestion des états, le routage, etc. Concernant Vue3, You Dashen a recommandé que nous utilisions pinia pour réaliser la gestion de l'état. Il a également déclaré que pinia est la nouvelle version de Vuex.

Alors, qu’est-ce que le pinia exactement ? Cet article vous aidera à en savoir plus !

1. Qu’est-ce que le pinia ?

Si vous avez appris Vue2, alors vous devez avoir utilisé Vuex. Nous savons tous que Vuex joue principalement le rôle de gestion d'état dans Vue2. La soi-disant gestion d'état est simplement un endroit pour stocker des données. Les données stockées dans Vuex sont accessibles dans chaque composant. C'est une partie importante de l'écosystème Vue. .composant.

Puisque Vuex est si important, comment peut-il être ignoré dans Vue3 ?

Dans Vue3, vous pouvez utiliser Vuex traditionnel pour implémenter la gestion de l'état, ou vous pouvez utiliser le dernier pinia pour implémenter la gestion de l'état. Voyons comment le site officiel explique pinia.

Explication du site officiel :

Pinia est un référentiel pour Vue qui vous permet de partager l'état entre composants/pages.

Il n'est pas difficile de voir d'après l'explication sur le site officiel ci-dessus que pinia et Vuex ont la même fonction. Il agit également comme un magasin de données. Les données stockées dans pinia nous permettent de l'utiliser dans divers composants.

En fait, pinia est une version améliorée de Vuex. Le site officiel indique également que afin de respecter l'auteur original, il a été nommé pinia au lieu de Vuex, afin que vous puissiez comparer directement pinia à Vuex de Vue3.

2. Pourquoi utiliser le pinia ?

De nombreux amis sont réticents à apprendre de nouvelles choses, comme le pinia dont nous parlons ici. De nombreux amis peuvent soulever une série de questions : Pourquoi devrions-nous apprendre le pinia ? Quels sont les avantages du pinia ? Puisque Vue3 peut également utiliser Vuex, pourquoi devrais-je l'apprendre ? ...

Concernant la série de questions ci-dessus, je pense que de nombreux amis qui viennent de commencer à apprendre le pinia se poseront cette question, y compris moi-même. Bien sûr, ces questions ont des réponses : on ne peut pas apprendre quelque chose sans raison ! Il a certainement ses propres avantages, nous allons donc d'abord donner ici les avantages du pinia, afin que tout le monde puisse en avoir une idée. Une fois que vous maîtriserez son utilisation, vous examinerez ces avantages rétrospectivement. Je crois que vous peut comprendre.

avantage:

• Vue2 et Vue3 sont pris en charge, ce qui permet à nos amis qui utilisent à la fois Vue2 et Vue3 de démarrer rapidement.
• Il n'y a que l'état, le getter et l'action dans Pinia, et la mutation dans Vuex a été abandonnée. La mutation dans Vuex n'a jamais été très populaire parmi les amis, alors Pinia l'a simplement abandonnée, ce qui a sans aucun doute réduit notre charge de travail.
• L'action dans Pinia prend en charge la synchronisation et l'asynchronisme, mais Vuex ne le prend pas en charge.
• Bon support de Typescript. Après tout, notre Vue3 recommande d'utiliser TS pour l'écriture. Pour le moment, l'utilisation de pinia est très appropriée.
• Il n'est pas nécessaire de créer des modules imbriqués. S'il y a trop de données dans Vuex, nous les gérons généralement dans des modules, ce qui est un peu gênant. Cependant, dans Pinia, chaque magasin est indépendant et ne s'affecte pas les uns les autres.
• La taille est très petite, seulement environ 1 Ko.
• pinia prend en charge les plug-ins pour étendre ses fonctionnalités.
• Prend en charge le rendu côté serveur.

Les avantages du pinia sont nombreux. Les principaux avantages énumérés ci-dessus sont quelques-uns de ses principaux avantages. Plus de détails doivent être compris lentement lorsque vous l'utilisez.

3. Préparation

Si vous souhaitez apprendre le pinia, il est préférable d'avoir une base de Vue3 et de comprendre ce qu'est l'API combinée. Si vous ne connaissez pas encore Vue3, il est recommandé d'apprendre d'abord Vue3.

Lorsque cet article explique Pinia, tout est basé sur Vue 3. Quant à l'utilisation de Pinia dans Vue2, les amis peuvent aller sur le site officiel de Pinia pour apprendre par eux-mêmes. Après tout, il y a encore quelques personnes qui utilisent Pinia dans Vue2.

Construction du projet :

Nous construisons ici un dernier projet Vue3 + TS + Vite.

Exécuter une commande :

npm créer vite@latest my-vite-app --template vue-ts

Exécutez le projet :

npm installer npm exécuter le développement

Supprimez les autres codes inutiles dans app.vue. La dernière page est la suivante :

4.Utilisation de base du pinia

4.1 Installer le pinia

Comme vue-router, vuex, etc., si nous voulons utiliser pinia, nous devons d'abord l'installer, et son installation est relativement simple.

Commande d'installation :

fil ajouter pinia # Ou utiliser npm npm install pinia

Une fois l'installation terminée, nous devons monter pinia dans l'application Vue, ce qui signifie que nous devons créer un stockage racine et le transmettre à l'application. En termes simples, nous créons un compartiment pour stocker les données et les mettons dans l'application.

Modifiez main.js, introduisez la méthode createPinia fournie par pinia et créez un stockage racine.

le code s'affiche comme ci-dessous :

// main.ts import { createApp } depuis "vue" ; importer l'application depuis "./App.vue" ; importer { createPinia } depuis "pinia" ; const pinia = createPinia(); const app = createApp(App); app.use(pinia); app.mount("#app");

4.2 Créer une boutique

Store signifie simplement entrepôt de données, et toutes nos données sont placées dans le magasin. Bien sûr, vous pouvez également l'entendre comme un composant public, mais ce composant public ne stocke que des données, accessibles et modifiables par tous nos autres composants.

Nous devons utiliser la méthode definitionStore() fournie par pinia pour créer un magasin, qui est utilisé pour stocker les données que nous devons utiliser globalement.

Tout d'abord, créez un nouveau dossier store dans le répertoire src du projet pour stocker les différents magasins que nous avons créés, puis créez un nouveau fichier user.ts dans ce répertoire, qui est principalement utilisé pour stocker les magasins liés aux utilisateurs.

le code s'affiche comme ci-dessous :

/src/store/user.ts import { definitionStore } from 'pinia' // Le premier paramètre est l'identifiant unique du magasin dans l'application export const useUsersStore = finishStore('users', { // Autres éléments de configuration})

Créer un magasin est très simple. Il suffit d'appeler la fonction définirStore dans pinia. Cette fonction reçoit deux paramètres :

• name : une chaîne, un élément obligatoire, l'identifiant unique du magasin.
• options : un objet, des éléments de configuration du magasin, tels que la configuration des données dans le magasin, des méthodes pour modifier les données, etc.

Nous pouvons définir n'importe quel nombre de magasins, car en fait, un magasin est une fonction. C'est aussi l'un des avantages de pinia, qui aplatit notre code. C'est la même chose que l'idée d'implémentation de Vue3.

4.3 Utiliser le magasin

Nous avons créé une boutique plus tôt. Pour parler franchement, nous avons créé une méthode, notre objectif doit donc être de l'utiliser. Si nous voulons l'utiliser dans App.vue, comment devrions-nous l'utiliser ?

le code s'affiche comme ci-dessous :

/src/App.vue <script setup lang="ts"> import { useUsersStore } depuis "../src/store/user" ; const store = useUsersStore(); console.log(magasin); </script>

L'utilisation du store est très simple. Il suffit d'introduire la méthode useUsersStore que nous avons déclarée. Nous pouvons d'abord jeter un œil à ce qui est généré lors de l'exécution de cette méthode :

4.4 Ajouter un état

Nous savons tous que le magasin est utilisé pour stocker des données publiques, alors où se trouvent exactement ces données ? Auparavant, nous avons utilisé la fonction DefinStore pour créer un magasin. Le deuxième paramètre de cette fonction est un élément de configuration des options. Les données que nous devons stocker sont placées dans l'attribut state de l'objet options.

Supposons que nous ajoutions des données de tâches de base au magasin et modifions le code user.ts.

le code s'affiche comme ci-dessous :

export const useUsersStore = definitionStore("users", { state: () => { return { name: "Little Pig Classroom", âge: 25, sexe: "Male", }; }, });

Dans le code ci-dessus, nous avons ajouté l'attribut state à l'élément de configuration, qui est utilisé pour stocker les données. Nous avons ajouté 3 éléments de données à l'état. Il convient de noter que l'état reçoit la valeur renvoyée par une fonction flèche et qu'il ne peut pas recevoir directement un objet.

4.5 État de fonctionnement

Le but du stockage des données dans le magasin est de les exploiter, nous essaierons donc ensuite d'exploiter les données dans l'état.

4.5.1 Lire les données d'état

La lecture des données d'état est très simple. Nous avons déjà essayé d'imprimer le magasin dans App.vue, ajoutons donc les données puis examinons les résultats de l'impression :

À ce moment-là, nous avons constaté qu'il y avait quelques attributs supplémentaires dans les résultats imprimés, qui se trouvaient être les données que nous avons ajoutées. Nous avons modifié App.vue pour afficher ces données.

le code s'affiche comme ci-dessous :

<template> <img alt="Vue logo" src="./assets/logo.png" /> <p>姓名：{ { name }}</p> <p>年龄：{ { age }}</ p> <p>性别：{ { sex }}</p> </template> <script setup lang="ts"> import { ref } from "vue"; importer { useUsersStore } depuis "../src/store/user" ; const store = useUsersStore(); const nom = ref<string>(store.name); const age = ref<numéro>(store.age); const sex = ref<string>(store.sex); </script>

Résultat de sortie :

Dans le code ci-dessus, nous obtenons directement la valeur stockée dans le magasin via store.age, etc., mais avez-vous remarqué que cela est plus fastidieux. Nous pouvons en fait utiliser la déstructuration pour obtenir la valeur, ce qui rend le code plus concis.

Le code déconstruit est le suivant :

importer { useUsersStore } depuis "../src/store/user" ; const store = useUsersStore(); const { nom, âge, sexe } = magasin ;

L'effet obtenu par le code ci-dessus est le même que celui obtenu un par un, mais le code est beaucoup plus simple.

4.5.2 Plusieurs composants utilisant l'état

L'objectif le plus important de l'utilisation de store est de partager des données entre les composants, nous créons donc ensuite un nouveau composant child.vue et utilisons les données d'état à l'intérieur de ce composant.

Le code enfant.vue est le suivant :

<template> <h1>Je suis un composant enfant</h1> <p>Nom : { { name }}</p> <p>Âge : { { age }></p> <p>Sexe : { { sexe }}</p> </template> <script setup lang="ts"> import { useUsersStore } depuis "../src/store/user"; const store = useUsersStore(); const { nom, âge, sexe } = magasin ; </script>

Le composant enfant est presque le même que le composant app.vue, sauf qu'il utilise simplement les données du magasin.

Effet de réalisation :

De cette façon, nous pouvons réaliser plusieurs composants en utilisant les données du magasin en même temps.

4.5.3 Modifier les données d'état

Si nous voulons modifier les données dans le magasin, nous pouvons directement réaffecter la valeur. Nous ajoutons un bouton dans App.vue et cliquons sur le bouton pour modifier certaines données dans le magasin.

le code s'affiche comme ci-dessous :

<template> <img alt="Vue logo" src="./assets/logo.png" /> <p>姓名：{ { name }}</p> <p>年龄：{ { age }}</ p> <p>性别：{ { sex }}</p> <button @click="changeName">更改姓名</button> </template> <script setup lang="ts"> importer l'enfant depuis './ enfant.vue'; importer { useUsersStore } depuis "../src/store/user" ; const store = useUsersStore(); const { nom, âge, sexe } = magasin ; const changeName = () => { store.name = "张三"; console.log(magasin); } ; </script>

Le code ci-dessus ajoute une méthode changeName, qui modifie la valeur de name dans le magasin. Cliquons sur le bouton pour voir l'effet final :

On voit que le nom dans la boutique a bien été modifié, mais il ne semble y avoir aucun changement sur la page, ce qui montre que le nom que nous utilisons n'est pas responsive.

De nombreux amis diront peut-être que vous pouvez utiliser la fonction d'écoute pour surveiller les modifications du magasin et actualiser la page...

En fait, pinia nous fournit une méthode pour rendre le nom et les autres attributs que nous obtenons réactifs, et nous remodifions le code.

Les codes app.vue et child.vue sont modifiés comme suit :

importer { storeToRefs } depuis 'pinia' ; const store = useUsersStore(); const { nom, âge, sexe } = storeToRefs(store);

La manière d'obtenir les données d'état dans nos deux composants a été modifiée sous la forme du code ci-dessus, en utilisant la fonction storeToRefs de pinia pour rendre les données dans sstate réactives.

De plus, nous ajoutons également des méthodes pour modifier les données d'état en child.vue.

Le code enfant.vue est le suivant :

<template> <h1>Je suis un composant enfant</h1> <p>Nom : { { name }}</p> <p>Âge : { { age }></p> <p>Sexe : { { sexe }}</p> <button @click="changeName">Changer le nom</button> </template> <script setup lang="ts"> importer { useUsersStore } depuis "../src/store/user" ; import { storeToRefs } depuis 'pinia' ; const store = useUsersStore(); const { nom, âge, sexe } = storeToRefs(store); const changeName = () => { store.name = "Classroom Petit Cochon"; } ; </script>

À ce stade, essayons de cliquer sur les boutons des deux composants séparément. L'effet est le suivant :

Lorsque les données de notre boutique changent, la page est également mise à jour !

4.5.4 État de réinitialisation

Parfois, nous modifions les données d'état et souhaitons les restaurer. Que devons-nous faire à ce moment-là ? Par exemple, l’utilisateur remplit une partie du formulaire et souhaite soudainement le réinitialiser à son état d’origine.

À ce stade, nous pouvons appeler directement la méthode $reset() du magasin, continuer à utiliser notre exemple et ajouter un bouton de réinitialisation.

le code s'affiche comme ci-dessous :

<button @click="reset">Réinitialiser le magasin</button> // Réinitialiser le magasin const reset = () => { store.$reset(); };

Lorsque nous cliquons sur le bouton de réinitialisation, les données du magasin passeront à leur état initial et la page sera mise à jour.

4.5.5 Données d'état de changement par lots

Auparavant, nous modifiions les données d'état une par une, comme store.name="Zhang San", etc. Si nous devons modifier plusieurs éléments de données à la fois, il existe un moyen plus simple d'utiliser la méthode $patch du magasin. Modifiez le code app.vue et ajoutez une méthode pour modifier les données par lots.

le code s'affiche comme ci-dessous :

<button @click="patchStore">Données de modification par lots</button> // Données de modification par lots const patchStore = () => { store.$patch({ nom : "Zhang San", âge : 100, sexe : "Femme ", }); };

Des amis expérimentés ont peut-être découvert que notre méthode de changement par lots semble un peu coûteuse. Si certains champs de notre état n'ont pas besoin d'être modifiés, mais selon la façon dont le code ci-dessus est écrit, nous devons énumérer tous les champs de l'état.

Afin de résoudre ce problème, la méthode $patch fournie par pinia peut également recevoir une fonction de rappel. Son utilisation est un peu comme notre fonction de rappel de boucle de tableau.

L'exemple de code est le suivant :

store.$patch((state) => { state.items.push({ nom : 'chaussures', quantité : 1 }) state.hasChanged = true })

Dans le code ci-dessus, nous avons modifié les données d'état par lots sans répertorier tous les champs d'état.

4.5.6 Remplacer directement l'ensemble de l'état

Pinia fournit une méthode qui nous permet de remplacer directement l'intégralité de l'objet state, en utilisant la méthode $state du magasin.

Exemple de code :

store.$state = { compteur : 666, nom : 'Zhang San' }

Le code ci-dessus remplacera l'état que nous avons déclaré à l'avance par un nouvel objet. Ce scénario peut être utilisé moins souvent, je ne l'expliquerai donc pas ici.

4.6 Attribut getters

Les getters sont un autre attribut dans l'élément de configuration du paramètre DefineStore. Nous avons parlé de l'attribut state plus tôt. La valeur de l'attribut getter est un objet qui contient diverses méthodes. Vous pouvez considérer le getter comme une propriété calculée dans Vue. Sa fonction est de renvoyer un nouveau résultat. Comme il est similaire à une propriété calculée dans Vue, il sera certainement mis en cache, tout comme calculé.

Bien sûr, notre getter ici consiste à traiter les données d'état.

4.6.1 Ajouter un getter

Voyons d'abord comment définir le getter et modifier user.ts.

le code s'affiche comme ci-dessous :

export const useUsersStore = definitionStore("users", { state: () => { return { name: "小猪课堂", âge: 25, sexe: "男", }; }, getters: { getAddAge: (state) => { return state.age + 100; }, }, });

Dans le code ci-dessus, nous avons ajouté l'attribut getter au paramètre de l'élément de configuration. L'objet attribut définit une méthode getAddAge. Cette méthode recevra par défaut un paramètre d'état, qui est l'objet d'état, puis la méthode renvoie une nouvelle donnée.

4.6.2 Utilisation des getters

Nous avons défini le getter dans le store, alors comment l'utiliser dans le composant ? C'est très simple à utiliser, on modifie App.vue.

le code s'affiche comme ci-dessous :

<template> <p>Nouvel âge : { { store.getAddAge }}</p> <button @click="patchStore">Modifier les données par lots</button> </template> <script setup lang="ts"> importer { useUsersStore } from "../src/store/user"; const store = useUsersStore(); // Modifier les données par lots const patchStore = () => { store.$patch({ name: "Zhang San", age : 100, sexe : "femelle", }); }; </script>

Dans le code ci-dessus, nous avons utilisé la méthode store.gettAddAge directement sur l'étiquette, ce qui peut garantir la réactivité. En fait, le nom et d'autres attributs dans notre état peuvent également être utilisés directement sur l'étiquette de cette manière, et peuvent également maintenir la réactivité .

Lorsque nous cliquons sur le bouton de modification des données par lots, le nouveau champ d'âge sur la page changera également.

4.6.3 Appel d'autres getters au sein d'un getter

Auparavant, notre méthode getAddAge utilisait simplement la méthode state, mais parfois nous devons appeler d'autres méthodes getter dans cette méthode getter.Comment l'appeler maintenant ?

En fait, c'est très simple. Nous pouvons appeler cela directement dans la méthode getter. Cela pointe vers l'instance du magasin, donc bien sûr d'autres getters peuvent être appelés.

L'exemple de code est le suivant :

export const useUsersStore = definitionStore("users", { state: () => { return { name: "Little Pig Classroom", age: 25, sex: "Male", }; }, getters: { getAddAge: (state) => { return state.age + 100; }, getNameAndAge(): string { return this.name + this.getAddAge; // Appel d'autres getters }, }, });

Dans le code ci-dessus, nous avons défini une fonction getter nommée getNameAndAge et l'avons utilisée directement dans la fonction pour obtenir des données d'état et appeler d'autres fonctions getter.

Des amis prudents constateront peut-être que nous n'utilisons pas la forme des fonctions fléchées ici. C'est parce que nous l'utilisons à l'intérieur de la fonction. Je pense que tout le monde connaît ce problème de pointage des fonctions fléchées ! Nous n’utilisons donc pas ici la forme de la fonction flèche.

Il n'y a alors aucun changement dans la forme de l'appel dans le composant. Le code est le suivant :

<p>Appelez d'autres getters : { { store.getNameAndAge }}</p>

4.6.4 Paramètres de passage du getter

Étant donné que la fonction getter effectue certains calculs ou traitements, nous devrons probablement transmettre des paramètres à la fonction getter, mais nous avons dit plus tôt que la fonction getter est équivalente à la propriété calculée du magasin, qui est similaire à la propriété calculée de vue , nous savons donc tous que les calculs dans les attributs Vue ne peuvent pas transmettre directement les paramètres, donc si notre fonction getter ici veut accepter les paramètres, elle doit également être traitée.

Exemple de code :

export const useUsersStore = definitionStore("users", { state: () => { return { name: "Little Pig Classroom", age: 25, sex: "Male", }; }, getters: { getAddAge: (state) => { return (num: number) => state.age + num; }, getNameAndAge(): string { return this.name + this.getAddAge; // Appel d'autres getters }, }, });

Dans le code ci-dessus, notre fonction getter getAddAge reçoit un paramètre num. Cette méthode d'écriture contient en fait un peu un concept de fermeture, ce qui équivaut à renvoyer une nouvelle fonction dans son ensemble et à transmettre un état à la nouvelle fonction.

Ensuite, nous l'utilisons dans le composant. La méthode est très simple. Le code est le suivant :

<p>Nouvel âge : {  store.getAddAge(1100) }}</p>

4.7 attribut actions

Les attributs d'état et de getters que nous avons mentionnés précédemment se situent principalement au niveau des données et n'ont pas de code de logique métier spécifique. Ils sont les mêmes que les données de données et les propriétés calculées dans notre code de composant.

Ensuite, si nous avons du code métier, il est préférable de désinstaller l'attribut actions.Cet attribut est similaire aux méthodes de notre code de composant et est utilisé pour placer certaines méthodes de traitement de la logique métier.

La valeur de l'attribut actions est également un objet, qui stocke également diverses méthodes, notamment les méthodes synchrones et les méthodes asynchrones.

4.7.1 Ajouter des actions

Nous pouvons essayer d'ajouter une méthode d'actions et de modifier user.ts.

le code s'affiche comme ci-dessous :

export const useUsersStore = definitionStore("users", { state: () => { return { name: "小猪课堂", âge: 25, sexe: "男", }; }, getters: { getAddAge: (state) => { return (num: number) => state.age + num; }, getNameAndAge(): string { return this.name + this.getAddAge; // 调用其它getter }, }, actions : { saveName(name : chaîne) { this.name = nom; }, }, });

Dans le code ci-dessus, nous avons défini une méthode d'actions très simple. Dans les scénarios réels, cette méthode peut être n'importe quelle logique, comme l'envoi de requêtes, le stockage de jetons, etc. Vous pouvez traiter la méthode actions comme une méthode ordinaire. La particularité est que celle-ci à l'intérieur de la méthode pointe vers le magasin actuel.

4.7.2 Utilisation des actions

Il est également très simple d'utiliser les méthodes dans les actions. Par exemple, nous souhaitons appeler cette méthode dans App.vue.

le code s'affiche comme ci-dessous :

const saveName = () => { store.saveName("Je suis un petit cochon"); };

Nous cliquons sur le bouton et appelons directement la méthode actions dans le magasin.

5. Résumé de l'exemple de code

Les codes des chapitres précédents ne sont pas complets et les principales parties du code sont publiées. Dans cette section, nous publierons tous les codes utilisés dans cet article pour que chacun puisse s'entraîner.

code main.ts :

importer { createApp } depuis "vue" ; importer l'application depuis "./App.vue" ; importer { createPinia } depuis "pinia" ; const pinia = createPinia(); const app = createApp(App); app.use(pinia); app.mount("#app");

Code utilisateur.ts :

import { definitionStore } from "pinia"; // Le premier paramètre est l'identifiant unique du magasin dans l'application export const useUsersStore = definitionStore("users", { state: () => { return { name: "Little Pig Classroom " , âge : 25, sexe : "masculin", }; }, getters : { getAddAge : (state) => { return (num : number) => state.age + num; }, getNameAndAge() : string { return this .name + this.getAddAge; // Appel d'autres getters }, }, actions : { saveName(name: string) { this.name = name; }, }, });

Code App.vue :

<template> <img alt="Vue logo" src="./assets/logo.png" /> <p>Nom : { { name }}</p> <p>Âge : { { age }}</ p> <p>Sexe : { { sex }}</p> <p>Nouvel âge : { { store.getAddAge(1100) }></p> <p>Appel d'autres getters : { { store.getNameAndAge }}</p> <button @click="changeName">Changer le nom</button> <button @click="reset">Réinitialiser la boutique</button> <button @click="patchStore"> Modifier données par lots</button> <button @click="saveName">Appeler une action</button> <!-- Sous-composant--> <child></child> </template> <script setup lang="ts" > importer un enfant depuis "./child.vue"; importer { useUsersStore } depuis "../src/store/user"; importer { storeToRefs } depuis "pinia"; const store = useUsersStore(); const { nom, âge, sexe } = storeToRefs(store); const changeName = () => { store.name = "Zhang San"; console.log(store); }; // Réinitialiser le magasin const reset = () => { store.$ reset( ); }; // Modifier les données par lots const patchStore = () => { store.$patch({ nom : "Zhang San", âge : 100, sexe :"Femme", }); }; // Appel de la méthode d'actions const saveName = () => { store.saveName("Je suis un petit cochon"); }; </script>

code enfant.vue :

<template> <h1>Je suis un composant enfant</h1> <p>Nom : { { name }}</p> <p>Âge : { { age }></p> <p>Sexe : { { sexe }}</p> <button @click="changeName">Changer le nom</button> </template> <script setup lang="ts"> importer { useUsersStore } depuis "../src/store/user" ; import { storeToRefs } depuis 'pinia' ; const store = useUsersStore(); const { nom, âge, sexe } = storeToRefs(store); const changeName = () => { store.name = "Classroom Petit Cochon"; } ; </script>

Résumer

Il y a très peu de points de connaissances en pinia, si vous avez une connaissance de base de Vuex, ce sera encore plus facile à apprendre. En fait, ce à quoi nous devrions prêter plus d'attention, c'est l'idée de la fonction. Avez-vous remarqué que tout ce que nous faisons dans Vue3 semble être représenté par une fonction. Pinia poursuit également cette idée.

Il est donc plus important que chacun comprenne cette idée de programmation combinée. Pinia n'est rien de plus que les trois points majeurs suivants :

• État
• getters
• Actions

Bien sûr, cet article n'explique que la partie utilisation de base, mais il peut répondre à la plupart des besoins dans le travail réel. Si vous souhaitez toujours apprendre d'autres fonctionnalités de pinia, telles que les plug-ins, les abonnements, etc., vous pouvez accéder au site officiel : site officiel de pinia .