{"id":76523,"date":"2024-03-13T12:09:16","date_gmt":"2024-03-13T11:09:16","guid":{"rendered":"https:\/\/kinsta.com\/fr\/?p=76523&#038;preview=true&#038;preview_id=76523"},"modified":"2024-10-09T13:32:05","modified_gmt":"2024-10-09T12:32:05","slug":"maitriser-vue-js-pina","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/maitriser-vue-js-pina\/","title":{"rendered":"Ma\u00eetriser la gestion des \u00e9tats dans Vue.js"},"content":{"rendered":"<p>Le <a href=\"https:\/\/kinsta.com\/fr\/sujets\/vue-js\/\">framework Vue pour JavaScript<\/a> est devenu populaire pour la construction d&rsquo;interfaces utilisateur et d&rsquo;applications \u00e0 page unique (SPA). Pour garantir le fonctionnement optimal de vos grandes applications, vous devez ma\u00eetriser la gestion des \u00e9tats, c&rsquo;est-\u00e0-dire le processus de gestion et de centralisation des donn\u00e9es r\u00e9actives d&rsquo;une application (\u00e9tat) entre plusieurs composants.<\/p>\n<p>Dans Vue, la gestion des \u00e9tats s&rsquo;est longtemps appuy\u00e9e sur Vuex, une biblioth\u00e8que proposant un stockage centralis\u00e9 pour tous les composants d&rsquo;une application. Cependant, de r\u00e9centes avanc\u00e9es dans l&rsquo;\u00e9cosyst\u00e8me Vue ont donn\u00e9 naissance au successeur de Vuex, Pinia.<\/p>\n<p>Pinia offre une approche de gestion plus l\u00e9g\u00e8re, modulaire et intuitive. Il s&rsquo;int\u00e8gre de mani\u00e8re transparente au syst\u00e8me de r\u00e9activit\u00e9 et \u00e0 l&rsquo;API de composition de Vue, ce qui permet aux d\u00e9veloppeurs de g\u00e9rer et d&rsquo;acc\u00e9der facilement \u00e0 l&rsquo;\u00e9tat partag\u00e9 de mani\u00e8re \u00e9volutive et facile \u00e0 maintenir.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Plantons le d\u00e9cor : Pinia vs Vuex<\/h2>\n<p>En tant que biblioth\u00e8que de r\u00e9f\u00e9rence pour la gestion de l&rsquo;\u00e9tat dans les applications Vue, Vuex fournissait un stockage centralis\u00e9 pour tous les composants d&rsquo;une application. Cependant, avec l&rsquo;\u00e9volution de Vue, Pinia repr\u00e9sente une solution plus moderne. Voyons en quoi elle diff\u00e8re de Vuex.<\/p>\n<ul>\n<li><strong>Diff\u00e9rences d&rsquo;API &#8211;<\/strong> L&rsquo;API de composition de Pinia offre une API plus fondamentale et plus intuitive que Vuex, ce qui rend la gestion de l&rsquo;\u00e9tat de l&rsquo;application plus simple. De plus, sa structure ressemble beaucoup \u00e0 l&rsquo;API Options de Vue, famili\u00e8re \u00e0 la plupart des d\u00e9veloppeurs Vue.<\/li>\n<li><strong>Prise en charge des types &#8211;<\/strong> Historiquement, de nombreux d\u00e9veloppeurs Vue se sont heurt\u00e9s \u00e0 la prise en charge limit\u00e9e des types de Vuex. En revanche, Pinia est une biblioth\u00e8que de gestion d&rsquo;\u00e9tat enti\u00e8rement typ\u00e9e qui \u00e9limine ces probl\u00e8mes. La s\u00e9curit\u00e9 des types permet d&rsquo;\u00e9viter les erreurs d&rsquo;ex\u00e9cution potentielles, contribue \u00e0 la lisibilit\u00e9 du code et facilite les capacit\u00e9s de mise \u00e0 l&rsquo;\u00e9chelle.<\/li>\n<li><strong>Syst\u00e8me de r\u00e9activit\u00e9 &#8211;<\/strong> Les deux biblioth\u00e8ques exploitent le syst\u00e8me de r\u00e9activit\u00e9 de Vue, mais l&rsquo;approche de Pinia s&rsquo;aligne plus \u00e9troitement sur l&rsquo;API de composition de Vue 3. Bien que l&rsquo;API de r\u00e9activit\u00e9 soit puissante, la gestion d&rsquo;\u00e9tats complexes dans de grandes applications peut s&rsquo;av\u00e9rer difficile. Heureusement, l&rsquo;architecture simple et flexible de Pinia facilite la gestion des \u00e9tats dans vos applications Vue 3. Le mod\u00e8le de stockage de Pinia vous permet de d\u00e9finir un stockage pour g\u00e9rer une partie sp\u00e9cifique de l&rsquo;\u00e9tat de l&rsquo;application, en simplifiant son organisation et en le partageant entre les composants.<\/li>\n<li><strong>L\u00e9g\u00e8ret\u00e9 &#8211;<\/strong> Avec seulement 1 Ko, Pinia s&rsquo;int\u00e8gre parfaitement \u00e0 votre environnement de d\u00e9veloppement, et sa l\u00e9g\u00e8ret\u00e9 peut am\u00e9liorer les performances et les temps de chargement de votre application.<\/li>\n<\/ul>\n<h2>Comment configurer un projet Vue avec Pinia<\/h2>\n<p>Pour int\u00e9grer Pinia dans un projet Vue, initialisez votre projet avec Vue CLI ou Vite. Apr\u00e8s l&rsquo;initialisation du projet, vous pouvez installer Pinia via npm ou yarn en tant que d\u00e9pendance.<\/p>\n<ol start=\"1\">\n<li>Cr\u00e9ez un nouveau projet Vue \u00e0 l&rsquo;aide de Vue CLI ou Vite. Ensuite, suivez les instructions pour configurer votre projet.\n<pre><code class=\"language-bash\">\/\/ Using Vue CLI\nvue create my-vue-ap\n\/\/ Using Vite\nnpm create vite@latest my-vue-app -- --template vue<\/code><\/pre>\n<\/li>\n<li>Changez votre r\u00e9pertoire pour le dossier du projet nouvellement cr\u00e9\u00e9 :\n<pre><code class=\"language-bash\">cd my-vue-app<\/code><\/pre>\n<\/li>\n<li>Installez Pinia comme d\u00e9pendance dans votre projet.\n<pre><code class=\"language-bash\">\/\/ Using npm\nnpm install pinia\n\/\/ Using yarn\nyarn add pinia<\/code><\/pre>\n<\/li>\n<li>Dans votre fichier d&rsquo;entr\u00e9e principal (habituellement <strong>main.js<\/strong> ou <strong>main.ts<\/strong>), importez Pinia et dites \u00e0 Vue de l&rsquo;utiliser :\n<pre><code class=\"language-js\">import { createApp } from 'vue';\nimport { createPinia } from 'pinia';\nimport App from '.\/App.vue';\n\nconst app = createApp(App);\n\napp.use(createPinia());\napp.mount('#app');<\/code><\/pre>\n<p>Une fois Pinia install\u00e9 et configur\u00e9 dans votre projet Vue, vous \u00eates pr\u00eat \u00e0 d\u00e9finir et \u00e0 utiliser des stockages pour la gestion des \u00e9tats.<\/li>\n<\/ol>\n<h2>Comment cr\u00e9er un stockage dans Pinia<\/h2>\n<p>Le stockage est l&rsquo;\u00e9pine dorsale de la gestion des \u00e9tats dans votre application Vue aliment\u00e9e par Pinia. Il vous aide \u00e0 g\u00e9rer les donn\u00e9es de l&rsquo;application de mani\u00e8re coh\u00e9rente et coordonn\u00e9e. Le stockage est l&rsquo;endroit o\u00f9 vous d\u00e9finissez, stockez et g\u00e9rez les donn\u00e9es \u00e0 partager entre les diff\u00e9rents composants de votre application.<\/p>\n<p>Cette centralisation est essentielle, car elle structure et organise les changements d&rsquo;\u00e9tat de votre application, rendant le flux de donn\u00e9es plus pr\u00e9visible et plus facile \u00e0 d\u00e9boguer.<\/p>\n<p>De plus, un stockage dans Pinia ne se contente pas de contenir l&rsquo;\u00e9tat : Les fonctionnalit\u00e9s incluses dans Pinia vous permettent de mettre \u00e0 jour l&rsquo;\u00e9tat via des actions et de calculer des \u00e9tats d\u00e9riv\u00e9s via des getters. Ces capacit\u00e9s int\u00e9gr\u00e9es contribuent \u00e0 une base de code plus efficace et plus facile \u00e0 maintenir.<\/p>\n<p>L&rsquo;exemple suivant illustre la cr\u00e9ation d&rsquo;un magasin Pinia de base dans le fichier <strong>src\/store.js<\/strong> d&rsquo;un projet.<\/p>\n<pre><code class=\"language-js\">import { defineStore } from 'pinia';\nexport const useStore = defineStore('main', {\n    state: () =&gt; ({\n        count: 0,\n    }),\n    actions: {\n        increment() {\n            this.count++;\n        },\n    },\n    getters: {\n        doubleCount: (state) =&gt; state.count * 2,\n    },\n});<\/code><\/pre>\n<h2>Comment acc\u00e9der \u00e0 l&rsquo;\u00e9tat du stockage dans les composants<\/h2>\n<p>Par rapport \u00e0 Vuex, l&rsquo;approche de Pinia en mati\u00e8re d&rsquo;acc\u00e8s et de gestion de l&rsquo;\u00e9tat est plus intuitive, surtout si vous \u00eates familier avec l&rsquo;API de composition de Vue 3. Cette API est un ensemble de plusieurs qui permettent l&rsquo;inclusion d&rsquo;une logique r\u00e9active et composable dans vos composants.<\/p>\n<p>Consid\u00e9rez le code suivant.<\/p>\n<pre><code class=\"language-js\">&lt;template&gt;\n\t&lt;div&gt;{{ store.count }}&lt;\/div&gt;\n&lt;\/template&gt;\n\n&lt;script&gt;&gt;\nimport { useStore } from '.\/store';\n\nexport default {\n\tsetup() {\n\tconst store = useStore();\n\t\treturn { store };\n\t},\n}\n&lt;\/script&gt;<\/code><\/pre>\n<p>Dans l&rsquo;extrait ci-dessus, la balise <code>&lt;template&gt;<\/code> contient le balisage <a href=\"https:\/\/kinsta.com\/fr\/blog\/qu-est-ce-que-le-html\/\">HTML<\/a> d\u00e9fini de votre composant. Pour afficher la valeur de la propri\u00e9t\u00e9 <code>count<\/code> du stockage Pinia, vous utilisez la syntaxe de liaison de donn\u00e9es de Vue, exprim\u00e9e sous la forme <code>{{ count }}<\/code>.<\/p>\n<p>La fonction <code>useStore<\/code> permet d&rsquo;acc\u00e9der au stockage Pinia, vous l&rsquo;importez donc de <strong>store.js<\/strong> \u00e0 l&rsquo;aide de <code>import { useStore } from '.\/store';<\/code>.<\/p>\n<p>Caract\u00e9ristique de l&rsquo;API de composition de Vue 3, la fonction <code>setup<\/code> d\u00e9finit l&rsquo;\u00e9tat r\u00e9actif et la logique de votre composant. Dans la fonction, vous appelez ensuite <code>useStore()<\/code> pour acc\u00e9der au stockage Pinia.<\/p>\n<p>Ensuite, <code>const count = store.count<\/code> acc\u00e8de \u00e0 la propri\u00e9t\u00e9 <code>count<\/code> du stockage et la rend disponible dans le composant.<\/p>\n<p>Enfin, <code>setup<\/code> renvoie <code>count<\/code>, ce qui permet au mod\u00e8le d&rsquo;effectuer le rendu. Le syst\u00e8me de r\u00e9activit\u00e9 de Vue signifie que le mod\u00e8le de votre composant mettra \u00e0 jour la valeur de <code>count<\/code> chaque fois qu&rsquo;elle changera dans le stockage.<\/p>\n<p>Vous trouverez ci-dessous une capture d&rsquo;\u00e9cran de la sortie.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/02\/pinia-store-demo-app.png\" alt=\"Capture d'\u00e9cran du mod\u00e8le Pinia Store Demo charg\u00e9 dans un navigateur.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Capture d&rsquo;\u00e9cran du mod\u00e8le Pinia Store Demo charg\u00e9 dans un navigateur.<\/figcaption><\/figure>\n<p>Cet exemple illustre les avantages de Pinia :<\/p>\n<ul>\n<li><strong>Simplicit\u00e9<\/strong> &#8211; Pinia permet un acc\u00e8s direct \u00e0 l&rsquo;\u00e9tat du stockage sans fonctions de mapping. En revanche, Vuex a besoin de <code>mapState<\/code> (ou d&rsquo;aides similaires) pour obtenir le m\u00eame acc\u00e8s.<\/li>\n<li><strong>Acc\u00e8s direct au magasin<\/strong> &#8211; Pinia vous permet d&rsquo;acc\u00e9der directement aux propri\u00e9t\u00e9s de l&rsquo;\u00e9tat (comme <code>store.count<\/code>), ce qui rend votre code plus lisible et compr\u00e9hensible. Pendant ce temps, Vuex n\u00e9cessite souvent des getters pour acc\u00e9der aux propri\u00e9t\u00e9s les plus fondamentales, ce qui ajoute de la complexit\u00e9 et diminue la lisibilit\u00e9.<\/li>\n<li><strong>Compatibilit\u00e9 avec l&rsquo;API de composition<\/strong> &#8211; Comme le montre la m\u00e9thode d&rsquo;installation, l&rsquo;int\u00e9gration de Pinia avec l&rsquo;API de composition s&rsquo;aligne particuli\u00e8rement bien avec le d\u00e9veloppement moderne de <a href=\"https:\/\/kinsta.com\/fr\/blog\/bibliotheques-composants-vue\/\">Vue<\/a>, offrant une exp\u00e9rience de codage plus uniforme.<\/li>\n<\/ul>\n<h2>Comment modifier l&rsquo;\u00e9tat avec Pinia<\/h2>\n<p>Dans Pinia, vous modifiez l&rsquo;\u00e9tat d&rsquo;un stockage \u00e0 l&rsquo;aide d&rsquo;actions, qui sont plus flexibles que les mutations Vuex. Consid\u00e9rez l&rsquo;appel de fonction suivant, qui incr\u00e9mente la propri\u00e9t\u00e9 <code>count<\/code> de l&rsquo;\u00e9tat :<\/p>\n<pre><code class=\"language-js\">store.increment(); \/\/ Increments the count<\/code><\/pre>\n<p>En revanche, l&rsquo;\u00e9quivalent Vuex implique la d\u00e9finition d&rsquo;une mutation en plus d&rsquo;au moins une action :<\/p>\n<pre><code class=\"language-js\">mutations: {\n\tincrement(state) {\n\tstate.count++;\n\t},\n},\nactions: {\n\tincrement({ commit }) {\n\tcommit('increment');\n\t},\n}<\/code><\/pre>\n<p>L&rsquo;action Pinia et son code Vuex \u00e9quivalent illustrent une diff\u00e9rence cruciale entre la complexit\u00e9 du code des biblioth\u00e8ques. Explorons ces diff\u00e9rences plus en d\u00e9tail :<\/p>\n<ul>\n<li><strong>Mutation d&rsquo;\u00e9tat directe ou indirecte<\/strong> &#8211; Comme le montre l&rsquo;action <code>increment<\/code>, les actions Pinia modifient directement l&rsquo;\u00e9tat du stockage. Dans Vuex, vous ne pouvez modifier l&rsquo;\u00e9tat qu&rsquo;\u00e0 l&rsquo;aide de mutations, que vous devez <em>valider<\/em> avec des actions. Cette s\u00e9paration des processus garantit la tra\u00e7abilit\u00e9 de vos changements d&rsquo;\u00e9tat, mais elle est plus complexe et plus rigide que les actions Pinia comparables.<\/li>\n<li><strong>Op\u00e9rations asynchrones et synchrones<\/strong> &#8211; Alors que les mutations Vuex sont toujours synchrones et ne peuvent pas contenir de processus asynchrones, les actions Pinia peuvent contenir du code synchrone <em>et<\/em> asynchrone. Par cons\u00e9quent, vous pouvez effectuer des appels API ou d&rsquo;autres op\u00e9rations asynchrones directement dans les actions, ce qui permet d&rsquo;all\u00e9ger la base de code et de la rendre plus concise.<\/li>\n<li><strong>Syntaxe simplifi\u00e9e<\/strong> &#8211; Vuex n\u00e9cessite souvent de d\u00e9finir des mutations et d&rsquo;appeler des actions pour les valider. Pinia supprime ce besoin. La possibilit\u00e9 de muter l&rsquo;\u00e9tat \u00e0 l&rsquo;int\u00e9rieur des actions r\u00e9duit le code standard et rend votre code existant plus simple. Dans Vuex, les mises \u00e0 jour d&rsquo;\u00e9tat de base n\u00e9cessitent la d\u00e9finition d&rsquo;une action et d&rsquo;une mutation, m\u00eame si l&rsquo;action ne fait que valider la mutation.<\/li>\n<\/ul>\n<h2>La transition de Vuex \u00e0 Pinia<\/h2>\n<p>La transition vers Pinia peut apporter de nombreux avantages en termes de simplicit\u00e9, de flexibilit\u00e9 et de maintenabilit\u00e9, mais elle n\u00e9cessite une planification et une r\u00e9flexion approfondies pour garantir une mise en \u0153uvre r\u00e9ussie.<\/p>\n<p>Avant de passer \u00e0 Pinia, assurez-vous que<\/p>\n<ol start=\"1\">\n<li>Vous familiariser avec les diff\u00e9rences entre l&rsquo;architecture de Pinia et celle de Vuex, les mod\u00e8les de gestion des \u00e9tats et les API. Il est essentiel de comprendre ces diff\u00e9rences pour remanier efficacement votre code et tirer pleinement parti des fonctionnalit\u00e9s de Pinia.<\/li>\n<li>Analysez et remaniez votre \u00e9tat Vuex, vos actions, vos mutations et vos getters pour les adapter \u00e0 la structure de Pinia. <strong>N&rsquo;oubliez pas que dans Pinia, vous d\u00e9finissez l&rsquo;\u00e9tat comme une fonction.<\/strong> Vous pouvez directement muter les \u00e9tats avec des actions et impl\u00e9menter des getters plus facilement.<\/li>\n<li>Planifiez la transition de vos modules de stockage Vuex. Pinia n&rsquo;utilise pas les modules de la m\u00eame mani\u00e8re que Vuex, mais vous pouvez toujours structurer vos stockages pour servir des objectifs similaires.<\/li>\n<li>Tirez parti de la prise en charge am\u00e9lior\u00e9e de TypeScript par Pinia. Si votre projet utilise <a href=\"https:\/\/kinsta.com\/fr\/blog\/guide-complet-typescript\/\">TypeScript<\/a>, consid\u00e9rez les capacit\u00e9s am\u00e9lior\u00e9es d&rsquo;inf\u00e9rence de type et de typage de Pinia pour une meilleure s\u00e9curit\u00e9 de type et une meilleure exp\u00e9rience pour le d\u00e9veloppeur.<\/li>\n<li>R\u00e9visez vos strat\u00e9gies de test pour tenir compte des changements dans la gestion des \u00e9tats. Ce processus peut impliquer une mise \u00e0 jour de la fa\u00e7on dont vous simulez les stockages ou les actions dans vos tests unitaires et d&rsquo;int\u00e9gration.<\/li>\n<li>R\u00e9fl\u00e9chissez \u00e0 la mani\u00e8re dont la transition affecte la structure et l&rsquo;organisation de votre projet. Tenez compte de facteurs tels que les conventions de d\u00e9nomination et la mani\u00e8re dont vous importez et utilisez les stockages entre les composants.<\/li>\n<li>Assurez-vous de la compatibilit\u00e9 avec les autres biblioth\u00e8ques. V\u00e9rifiez les mises \u00e0 jour n\u00e9cessaires ou les changements de d\u00e9pendances que la transition pourrait affecter.<\/li>\n<li>\u00c9valuez les \u00e9ventuels changements de performance. Pinia est g\u00e9n\u00e9ralement plus l\u00e9ger que Vuex, mais continuez \u00e0 surveiller les performances de votre application pendant et apr\u00e8s la transition pour vous assurer qu&rsquo;il n&rsquo;y a pas de probl\u00e8mes.<\/li>\n<\/ol>\n<p>La conversion d&rsquo;un magasin de Vuex \u00e0 Pinia implique plusieurs \u00e9tapes pour tenir compte des diff\u00e9rences de structures et d&rsquo;API. Prenons l&rsquo;exemple du stockage Pinia pr\u00e9sent\u00e9 plus haut.<\/p>\n<p>Le m\u00eame stockage dans un fichier Vuex <strong>store.js<\/strong> se pr\u00e9sente comme suit.<\/p>\n<pre><code class=\"language-js\">import Vue from 'vue';\nimport Vuex from 'vuex';\nVue.use(Vuex);\n\nexport default new Vuex.Store({\n    state: {\n        count: 0,\n    },\n    mutations: {\n        increment(state) {\n            state.count++;\n        },\n    },\n    actions: {\n        increment(context) {\n            context.commit('increment');\n        },\n    },\n    getters: {\n        doubleCount(state) {\n            return state.count * 2;\n        },\n    },\n});<\/code><\/pre>\n<p>Comme pour le stockage Pinia pr\u00e9c\u00e9dent, cet exemple Vuex contient un objet <code>state<\/code> avec une seule propri\u00e9t\u00e9 <code>count<\/code> initialis\u00e9e \u00e0 <code>0<\/code>.<\/p>\n<p>L&rsquo;objet <code>mutations<\/code> contient des m\u00e9thodes pour modifier directement l&rsquo;\u00e9tat, tandis que les m\u00e9thodes de l&rsquo;objet <code>actions<\/code> engagent la mutation <code>increment<\/code>.<\/p>\n<p>Ensuite, l&rsquo;objet <code>getters<\/code> contient la m\u00e9thode <code>doubleCount<\/code>, qui multiplie l&rsquo;\u00e9tat <code>count<\/code> par <code>2<\/code> et renvoie le r\u00e9sultat.<\/p>\n<p>Comme le montre ce code, l&rsquo;impl\u00e9mentation d&rsquo;un stockage dans Pinia implique plusieurs diff\u00e9rences notables par rapport \u00e0 Vuex :<\/p>\n<ul>\n<li><strong>Initialisation<\/strong> &#8211; Pinia ne n\u00e9cessite pas <code>Vue.use()<\/code>.<\/li>\n<li><strong>Structure<\/strong> &#8211; Dans Pinia, l&rsquo;\u00e9tat est une fonction renvoyant un objet, ce qui permet une meilleure prise en charge de TypeScript et une plus grande r\u00e9activit\u00e9.<\/li>\n<li><strong>Actions<\/strong> &#8211; Dans Pinia, les actions sont des m\u00e9thodes qui modifient directement l&rsquo;\u00e9tat sans avoir besoin de mutations, ce qui simplifie le code.<\/li>\n<li><strong>Getters<\/strong> &#8211; Bien que similaires \u00e0 Vuex, les Getters dans Pinia sont d\u00e9finis \u00e0 l&rsquo;int\u00e9rieur de la d\u00e9finition du magasin et peuvent acc\u00e9der directement \u00e0 l&rsquo;\u00e9tat.<\/li>\n<\/ul>\n<h3>Comment utiliser le stockage dans les composants<\/h3>\n<p>Avec Vuex, vous pouvez utiliser le stockage comme suit :<\/p>\n<pre><code class=\"language-js\">&lt;template&gt;\n\t&lt;div&gt;{{ doubleCount }}&lt;\/div&gt;\n\t&lt;button @click=\"increment\"&gt;Increment&lt;\/button&gt;\n&lt;\/template&gt;\n\n&lt;script&gt;\nimport { mapGetters, mapActions } from 'vuex';\n\nexport default {\n\tcomputed: {\n\t...mapGetters(['doubleCount']),\n\t},\n\tmethods: {\n\t...mapActions(['increment']),\n\t},\n};\n&lt;\/script&gt;<\/code><\/pre>\n<p>Pour Pinia, l&rsquo;utilisation devient :<\/p>\n<pre><code class=\"language-js\">&lt;template&gt;\n\t&lt;div&gt;{{ store.doubleCount }}&lt;\/div&gt;\n\t&lt;button&gt; @click=\"store.increment\"&gt;Increment&lt;\/button&gt;\n&lt;\/template&gt;\n\n&lt;script&gt;&gt;\nimport { useStore } from '\/src\/store';\n\nexport default {\n\tsetup() {\n\tconst store = useStore();\n\treturn {\n\t\tstore,\n\t};\n\t},\n};\n&lt;\/script&gt;<\/code><\/pre>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/02\/demo-landing-page.png\" alt=\"Les conversions du stopckage Pinia.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Les conversions du stopckage Pinia.<\/figcaption><\/figure>\n<p>Cet exemple couvre une conversion de base. Pour les stockages Vuex plus complexes, en particulier ceux qui utilisent des modules, la conversion impliquera une restructuration plus d\u00e9taill\u00e9e pour s&rsquo;aligner sur l&rsquo;architecture de Pinia.<\/p>\n<h2>Comment d\u00e9ployer votre application Vue<\/h2>\n<p>Avant de proc\u00e9der au d\u00e9ploiement, inscrivez-vous \u00e0 un essai gratuit du <a href=\"https:\/\/sevalla.com\/application-hosting\/\">service d&rsquo;h\u00e9bergement d&rsquo;applications de Kinsta<\/a>. Vous allez d\u00e9ployer l&rsquo;application \u00e0 l&rsquo;<a href=\"https:\/\/docs.sevalla.com\/templates\/overviewnodejs-examples#node-js-application-with-a-dockerfile\">aide d&rsquo;un fichier Docker<\/a>.<\/p>\n<p>Cr\u00e9ez un <strong>fichier Docker<\/strong> \u00e0 la racine de votre projet et collez-y le contenu suivant :<\/p>\n<pre><code class=\"language-bash\">FROM node:latest\nWORKDIR \/app\nCOPY package*.json .\/\nRUN npm install\nCOPY .\/ .\nCMD [\"npm\", \"run\", \"start\"]<\/code><\/pre>\n<p>Ce code indique au moteur Docker de Kinsta d&rsquo;installer Node.js (<code>FROM node:latest<\/code>), de cr\u00e9er le r\u00e9pertoire de travail (<code>WORKDIR \/app<\/code>), d&rsquo;installer les modules node \u00e0 partir du fichier <strong>package.json<\/strong> (<code>RUN npm install<\/code>) et de d\u00e9finir la commande <a href=\"https:\/\/docs.sevalla.com\/templates\/overviewnodejs-examples#start-command\">start (<code>CMD [\"npm\", \"run\", \"start\"]<\/code>)<\/a> qui sera invoqu\u00e9e au d\u00e9marrage de l&rsquo;application <a href=\"https:\/\/kinsta.com\/fr\/sujets\/vue-js\/\">Vue<\/a>. Les commandes <code>COPY<\/code> copient les fichiers ou r\u00e9pertoires sp\u00e9cifi\u00e9s dans le r\u00e9pertoire de travail.<\/p>\n<p>Ensuite, poussez votre code vers un fournisseur Git pr\u00e9f\u00e9r\u00e9 (<a href=\"https:\/\/docs.sevalla.com\/applications\/git\/bitbucket#grant-access-to-the-kinsta-bitbucket-application\">Bitbucket<\/a>, <a href=\"https:\/\/docs.sevalla.com\/applications\/git\/github#authenticate-and-authorize\">GitHub<\/a> ou <a href=\"https:\/\/docs.sevalla.com\/applications\/git\/gitlab#authorize-the-kinsta-gitlab-application\">GitLab<\/a>). Une fois que votre r\u00e9pertoire est pr\u00eat, suivez les \u00e9tapes suivantes pour d\u00e9ployer votre application sur Kinsta :<\/p>\n<ol start=\"1\">\n<li>Connectez-vous ou cr\u00e9ez un compte pour afficher votre tableau de bord <a href=\"https:\/\/my.kinsta.com\/?lang=fr\" target=\"_blank\" rel=\"noopener noreferrer\">MyKinsta<\/a>.<\/li>\n<li>Autorisez Kinsta avec votre fournisseur Git.<\/li>\n<li>S\u00e9lectionnez <strong>Application<\/strong> dans la colonne lat\u00e9rale de gauche et cliquez sur le bouton <strong>Ajouter une application<\/strong>.<\/li>\n<li>Dans la fen\u00eatre modale qui s&rsquo;affiche, choisissez le d\u00e9p\u00f4t que vous souhaitez d\u00e9ployer. Si vous avez plusieurs branches, vous pouvez s\u00e9lectionner la branche souhait\u00e9e et donner un nom \u00e0 votre application.<\/li>\n<li>S\u00e9lectionnez l&rsquo;un des emplacements de centre de donn\u00e9es disponibles.<\/li>\n<li>Choisissez votre environnement de construction et s\u00e9lectionnez <strong>Utiliser Dockerfile pour configurer l&rsquo;image du conteneur<\/strong>.<\/li>\n<li>Si votre fichier Docker ne se trouve pas \u00e0 la racine de votre r\u00e9pertoire, utilisez <strong>Contexte<\/strong> pour indiquer son chemin et cliquez sur <strong>Continuer<\/strong>.<\/li>\n<li>Vous pouvez laisser l&rsquo;entr\u00e9e de la <strong>commande Start<\/strong> vide. Kinsta utilise <code>npm start<\/code> pour d\u00e9marrer votre application.<\/li>\n<li>S\u00e9lectionnez la taille du pod et le nombre d&rsquo;instances qui conviennent le mieux \u00e0 votre application et cliquez sur <strong>Continuer<\/strong>.<\/li>\n<li>Remplissez les informations relatives \u00e0 votre carte bancaire et cliquez sur <strong>Cr\u00e9er une application<\/strong>.<\/li>\n<\/ol>\n<p>Comme alternative \u00e0 l&rsquo;h\u00e9bergement d&rsquo;applications, vous pouvez opter pour le d\u00e9ploiement de votre application Vue en tant que site statique gr\u00e2ce \u00e0 l&rsquo;<a href=\"https:\/\/sevalla.com\/static-site-hosting\/\">h\u00e9bergement gratuit de sites statiques<\/a> de Kinsta.<\/p>\n<h2>R\u00e9sum\u00e9<\/h2>\n<p>Le passage de Vuex \u00e0 Pinia marque une \u00e9volution significative dans la gestion des \u00e9tats au sein de l&rsquo;\u00e9cosyst\u00e8me Vue. La simplicit\u00e9 de Pinia, la prise en charge am\u00e9lior\u00e9e de TypeScript et l&rsquo;alignement avec l&rsquo;API Composition de Vue 3 en font un choix convaincant pour les applications Vue modernes.<\/p>\n<p>Lorsque vous \u00eates pr\u00eat \u00e0 h\u00e9berger votre application Vue avec Kinsta, vous pouvez acc\u00e9der \u00e0 une infrastructure rapide, s\u00e9curis\u00e9e et fiable. <a href=\"https:\/\/kinsta.com\/fr\/inscription\/\">Inscrivez-vous \u00e0 Kinsta<\/a> et utilisez notre service d&rsquo;<a href=\"https:\/\/sevalla.com\/application-hosting\/\">h\u00e9bergement d&rsquo;applications<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Le framework Vue pour JavaScript est devenu populaire pour la construction d&rsquo;interfaces utilisateur et d&rsquo;applications \u00e0 page unique (SPA). Pour garantir le fonctionnement optimal de vos &#8230;<\/p>\n","protected":false},"author":199,"featured_media":76524,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[979,1016],"class_list":["post-76523","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-frameworks-javascript","topic-vue-js"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Ma\u00eetriser la gestion des \u00e9tats dans Vue.js avec Pinia - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Apprenez-en plus sur Pinia, qui offre aux d\u00e9veloppeurs une approche plus l\u00e9g\u00e8re et plus intuitive de la gestion et de l&#039;acc\u00e8s \u00e0 l&#039;\u00e9tat partag\u00e9.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/fr\/blog\/maitriser-vue-js-pina\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Ma\u00eetriser la gestion des \u00e9tats dans Vue.js\" \/>\n<meta property=\"og:description\" content=\"Apprenez-en plus sur Pinia, qui offre aux d\u00e9veloppeurs une approche plus l\u00e9g\u00e8re et plus intuitive de la gestion et de l&#039;acc\u00e8s \u00e0 l&#039;\u00e9tat partag\u00e9.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/fr\/blog\/maitriser-vue-js-pina\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstafrance\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-13T11:09:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-09T12:32:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/03\/master-state-management-in-vue-js-with-pinia.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jeremy Holcombe\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Apprenez-en plus sur Pinia, qui offre aux d\u00e9veloppeurs une approche plus l\u00e9g\u00e8re et plus intuitive de la gestion et de l&#039;acc\u00e8s \u00e0 l&#039;\u00e9tat partag\u00e9.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/03\/master-state-management-in-vue-js-with-pinia.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@kinsta_fr\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_fr\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jeremy Holcombe\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/maitriser-vue-js-pina\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/maitriser-vue-js-pina\/\"},\"author\":{\"name\":\"Jeremy Holcombe\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\"},\"headline\":\"Ma\u00eetriser la gestion des \u00e9tats dans Vue.js\",\"datePublished\":\"2024-03-13T11:09:16+00:00\",\"dateModified\":\"2024-10-09T12:32:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/maitriser-vue-js-pina\/\"},\"wordCount\":2650,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/maitriser-vue-js-pina\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/03\/master-state-management-in-vue-js-with-pinia.jpg\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/maitriser-vue-js-pina\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/maitriser-vue-js-pina\/\",\"url\":\"https:\/\/kinsta.com\/fr\/blog\/maitriser-vue-js-pina\/\",\"name\":\"Ma\u00eetriser la gestion des \u00e9tats dans Vue.js avec Pinia - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/maitriser-vue-js-pina\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/maitriser-vue-js-pina\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/03\/master-state-management-in-vue-js-with-pinia.jpg\",\"datePublished\":\"2024-03-13T11:09:16+00:00\",\"dateModified\":\"2024-10-09T12:32:05+00:00\",\"description\":\"Apprenez-en plus sur Pinia, qui offre aux d\u00e9veloppeurs une approche plus l\u00e9g\u00e8re et plus intuitive de la gestion et de l'acc\u00e8s \u00e0 l'\u00e9tat partag\u00e9.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/maitriser-vue-js-pina\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/maitriser-vue-js-pina\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/maitriser-vue-js-pina\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/03\/master-state-management-in-vue-js-with-pinia.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/03\/master-state-management-in-vue-js-with-pinia.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/maitriser-vue-js-pina\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Vue.js\",\"item\":\"https:\/\/kinsta.com\/fr\/sujets\/vue-js\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Ma\u00eetriser la gestion des \u00e9tats dans Vue.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/fr\/#website\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/fr\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstafrance\/\",\"https:\/\/x.com\/kinsta_fr\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\",\"name\":\"Jeremy Holcombe\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g\",\"caption\":\"Jeremy Holcombe\"},\"description\":\"Senior Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/jeremyholcombe\/\"],\"url\":\"https:\/\/kinsta.com\/fr\/blog\/author\/jeremyholcombe\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Ma\u00eetriser la gestion des \u00e9tats dans Vue.js avec Pinia - Kinsta\u00ae","description":"Apprenez-en plus sur Pinia, qui offre aux d\u00e9veloppeurs une approche plus l\u00e9g\u00e8re et plus intuitive de la gestion et de l'acc\u00e8s \u00e0 l'\u00e9tat partag\u00e9.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/fr\/blog\/maitriser-vue-js-pina\/","og_locale":"fr_FR","og_type":"article","og_title":"Ma\u00eetriser la gestion des \u00e9tats dans Vue.js","og_description":"Apprenez-en plus sur Pinia, qui offre aux d\u00e9veloppeurs une approche plus l\u00e9g\u00e8re et plus intuitive de la gestion et de l'acc\u00e8s \u00e0 l'\u00e9tat partag\u00e9.","og_url":"https:\/\/kinsta.com\/fr\/blog\/maitriser-vue-js-pina\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstafrance\/","article_published_time":"2024-03-13T11:09:16+00:00","article_modified_time":"2024-10-09T12:32:05+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/03\/master-state-management-in-vue-js-with-pinia.jpg","type":"image\/jpeg"}],"author":"Jeremy Holcombe","twitter_card":"summary_large_image","twitter_description":"Apprenez-en plus sur Pinia, qui offre aux d\u00e9veloppeurs une approche plus l\u00e9g\u00e8re et plus intuitive de la gestion et de l'acc\u00e8s \u00e0 l'\u00e9tat partag\u00e9.","twitter_image":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/03\/master-state-management-in-vue-js-with-pinia.jpg","twitter_creator":"@kinsta_fr","twitter_site":"@kinsta_fr","twitter_misc":{"\u00c9crit par":"Jeremy Holcombe","Dur\u00e9e de lecture estim\u00e9e":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/fr\/blog\/maitriser-vue-js-pina\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/blog\/maitriser-vue-js-pina\/"},"author":{"name":"Jeremy Holcombe","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21"},"headline":"Ma\u00eetriser la gestion des \u00e9tats dans Vue.js","datePublished":"2024-03-13T11:09:16+00:00","dateModified":"2024-10-09T12:32:05+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/maitriser-vue-js-pina\/"},"wordCount":2650,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/maitriser-vue-js-pina\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/03\/master-state-management-in-vue-js-with-pinia.jpg","inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/fr\/blog\/maitriser-vue-js-pina\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/fr\/blog\/maitriser-vue-js-pina\/","url":"https:\/\/kinsta.com\/fr\/blog\/maitriser-vue-js-pina\/","name":"Ma\u00eetriser la gestion des \u00e9tats dans Vue.js avec Pinia - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/maitriser-vue-js-pina\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/maitriser-vue-js-pina\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/03\/master-state-management-in-vue-js-with-pinia.jpg","datePublished":"2024-03-13T11:09:16+00:00","dateModified":"2024-10-09T12:32:05+00:00","description":"Apprenez-en plus sur Pinia, qui offre aux d\u00e9veloppeurs une approche plus l\u00e9g\u00e8re et plus intuitive de la gestion et de l'acc\u00e8s \u00e0 l'\u00e9tat partag\u00e9.","breadcrumb":{"@id":"https:\/\/kinsta.com\/fr\/blog\/maitriser-vue-js-pina\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/fr\/blog\/maitriser-vue-js-pina\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/blog\/maitriser-vue-js-pina\/#primaryimage","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/03\/master-state-management-in-vue-js-with-pinia.jpg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/03\/master-state-management-in-vue-js-with-pinia.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/fr\/blog\/maitriser-vue-js-pina\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/fr\/"},{"@type":"ListItem","position":2,"name":"Vue.js","item":"https:\/\/kinsta.com\/fr\/sujets\/vue-js\/"},{"@type":"ListItem","position":3,"name":"Ma\u00eetriser la gestion des \u00e9tats dans Vue.js"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/fr\/#website","url":"https:\/\/kinsta.com\/fr\/","name":"Kinsta\u00ae","description":"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es","publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/fr\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstafrance\/","https:\/\/x.com\/kinsta_fr","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21","name":"Jeremy Holcombe","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g","caption":"Jeremy Holcombe"},"description":"Senior Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems.","sameAs":["https:\/\/www.linkedin.com\/in\/jeremyholcombe\/"],"url":"https:\/\/kinsta.com\/fr\/blog\/author\/jeremyholcombe\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/76523","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/users\/199"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/comments?post=76523"}],"version-history":[{"count":5,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/76523\/revisions"}],"predecessor-version":[{"id":76560,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/76523\/revisions\/76560"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/76523\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/76523\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/76523\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/76523\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/76523\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/76523\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/76523\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/76523\/translations\/es"},{"href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/76523\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media\/76524"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media?parent=76523"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/tags?post=76523"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/topic?post=76523"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}