{"id":58823,"date":"2024-04-13T12:09:46","date_gmt":"2024-04-13T10:09:46","guid":{"rendered":"https:\/\/kinsta.com\/nl\/?p=58823&#038;preview=true&#038;preview_id=58823"},"modified":"2024-04-16T11:35:04","modified_gmt":"2024-04-16T09:35:04","slug":"vue-pinia","status":"publish","type":"post","link":"https:\/\/kinsta.com\/nl\/blog\/vue-pinia\/","title":{"rendered":"State management in Vue.js met Pinia"},"content":{"rendered":"<p>Het <a href=\"https:\/\/kinsta.com\/nl\/onderwerpen\/vue-js\/\">Vue framework voor JavaScript<\/a> is populair geworden voor het bouwen van gebruikersinterfaces en single-page applicaties (SPA&#8217;s). Om ervoor te zorgen dat je grote apps optimaal functioneren, heb je een goed begrip nodig van state management &#8211; het proces van het beheren en centraliseren van de reactieve gegevens (state) van een applicatie over meerdere componenten.<\/p>\n<p>In Vue is state management lange tijd gebaseerd geweest op Vuex, een bibliotheek met een centrale opslag voor alle componenten van een applicatie. Recente ontwikkelingen in het Vue ecosysteem hebben echter geleid tot de opvolger van Vuex, Pinia.<\/p>\n<p>Pinia biedt een meer lichtgewicht, modulaire en intu\u00eftieve beheeraanpak. Het integreert naadloos met Vue&#8217;s reactiviteitssysteem en Composition API, waardoor het voor developers eenvoudig wordt om samen state te beheren en te benaderen op een schaalbare en onderhoudbare manier.<\/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>De achtergrond: Pinia vs Vuex<\/h2>\n<p>Als go-to bibliotheek voor state beheer in Vue applicaties, bood Vuex een gecentraliseerde opslag voor alle componenten van een applicatie. Met de vooruitgang van Vue vertegenwoordigt Pinia echter een modernere oplossing. Laten we eens kijken hoe het verschilt van Vuex.<\/p>\n<ul>\n<li><strong>API verschillen &#8211;<\/strong> Pinia&#8217;s Composition API biedt een meer fundamentele en intu\u00eftieve API dan Vuex, waardoor het eenvoudiger is om de state van de applicatie te beheren. Bovendien lijkt de structuur erg op de Options API van Vue, die bekend is bij de meeste Vue ontwikkelaars.<\/li>\n<li><strong>Ondersteuning voor types &#8211;<\/strong> Historisch gezien hebben veel Vue ontwikkelaars geworsteld met de beperkte ondersteuning voor types van Vuex. Pinia is daarentegen een volledig getypeerde state management bibliotheek die deze zorgen wegneemt. De typeveiligheid helpt bij het voorkomen van potenti\u00eble runtime fouten, draagt bij aan de leesbaarheid van de code en vergemakkelijkt soepelere schaalbaarheid.<\/li>\n<li><strong>Reactiviteitssysteem &#8211;<\/strong> Beide bibliotheken maken gebruik van Vue&#8217;s reactiviteitssysteem, maar Pinia&#8217;s benadering sluit beter aan bij Vue 3&#8217;s Composition API. Hoewel de reactiviteit API krachtig is, kan het beheren van complexe states in grote applicaties een uitdaging zijn. Gelukkig verlicht Pinia&#8217;s eenvoudige en flexibele architectuur het gedoe van statesbeheer in je Vue 3 applicaties. Met Pinia&#8217;s store pattern kun je een store defini\u00ebren voor het beheren van een specifiek deel van de applicatie-state, het vereenvoudigen van de organisatie en het delen ervan over componenten.<\/li>\n<li><strong>Lichtgewicht karakter &#8211;<\/strong> Met slechts 1 KB integreert Pinia naadloos in je ontwikkelomgeving en het lichtgewicht karakter kan de prestaties en laadtijden van je applicaties verbeteren.<\/li>\n<\/ul>\n<h2>Zo zet je een Vue project op met Pinia<\/h2>\n<p>Om Pinia te integreren in een Vue project, initialiseer je je project met Vue CLI of Vite. Na het initialiseren van het project kun je Pinia installeren via npm of yarn als een afhankelijkheid.<\/p>\n<ol start=\"1\">\n<li>Maak een nieuw Vue project met Vue CLI of Vite. Volg vervolgens de aanwijzingen om je project in te stellen.\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>Verander je map naar de nieuw aangemaakte projectmap:\n<pre><code class=\"language-bash\">cd my-vue-app<\/code><\/pre>\n<\/li>\n<li>Installeer Pinia als een dependency in je project.\n<pre><code class=\"language-bash\">\/\/ Using npm\nnpm install pinia\n\/\/ Using yarn\nyarn add pinia<\/code><\/pre>\n<\/li>\n<li>Importeer Pinia in je hoofdbestand (meestal <strong>main.js<\/strong> of <strong>main.ts<\/strong>) en vertel Vue om het te gebruiken:\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>Met Pinia ge\u00efnstalleerd en ingesteld in je Vue project, ben je klaar om stores te defini\u00ebren en te gebruiken voor statesbeheer.<\/li>\n<\/ol>\n<h2>Zo maak je een store in Pinia<\/h2>\n<p>De store is de ruggengraat van het state-beheer in je door Pinia aangedreven Vue applicatie. Het helpt je om applicatie-brede gegevens op een samenhangende en geco\u00f6rdineerde manier te beheren. De store is waar je de gegevens definieert, opslaat en beheert die je wilt delen met de verschillende componenten van je applicatie.<\/p>\n<p>Deze centralisatie is cruciaal, omdat het de state-veranderingen van je app structureert en organiseert, waardoor de gegevensstroom voorspelbaarder wordt en debuggen eenvoudiger wordt.<\/p>\n<p>Bovendien doet een store in Pinia meer dan het opslaan van de state: Met de meegeleverde functionaliteiten van Pinia kun je de state bijwerken via acties en afgeleide states berekenen via getters. Deze ingebouwde mogelijkheden dragen bij aan een effici\u00ebntere en beter onderhoudbare codebase.<\/p>\n<p>Het volgende voorbeeld illustreert het maken van een basis Pinia store in het bestand <strong>src\/store.js<\/strong> van een project.<\/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>Toegang tot store state in componenten<\/h2>\n<p>Vergeleken met Vuex is Pinia&#8217;s benadering van state-toegang en beheer intu\u00eftiever, vooral als je bekend bent met Vue 3&#8217;s Composition API. Deze API is een set van verschillende die het mogelijk maken om reactieve en samenstelbare logica in je componenten op te nemen.<\/p>\n<p>Bekijk de volgende code.<\/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>In het bovenstaande fragment bevat de tag <code>&lt;template&gt;<\/code> de gedefinieerde <a href=\"https:\/\/kinsta.com\/blog\/what-is-html\/\">HTML opmaak<\/a> van je component. Om de waarde van de propery<code>count<\/code> uit de Pinia store weer te geven, gebruik je Vue&#8217;s data binding syntaxis, uitgedrukt als <code>{{ count }}<\/code>.<\/p>\n<p>De <code>useStore<\/code> functie biedt toegang tot de Pinia store, dus je importeert deze vanuit <strong>store.js<\/strong> met <code>import { useStore } from '.\/store';<\/code>.<\/p>\n<p>Een functie van Vue 3&#8217;s Composition API, de <code>setup<\/code> functie definieert de reactieve state en logica van je component. Binnen de functie roep je vervolgens <code>useStore()<\/code> aan om toegang te krijgen tot de Pinia store.<\/p>\n<p>Vervolgens krijgt <code>const count = store.count<\/code> toegang tot de store&#8217;s <code>count<\/code> property, waardoor deze beschikbaar wordt in het component.<\/p>\n<p>Tot slot geeft <code>setup<\/code> de <code>count<\/code> terug, zodat de template deze kan renderen. Het reactiviteitssysteem van Vue betekent dat de template van je component de waarde van <code>count<\/code> bijwerkt telkens als deze in de store verandert.<\/p>\n<p>Hieronder zie je een screenshot van de uitvoer.<\/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=\"Screenshot van de Pinia Store Demo template geladen in een browser.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Screenshot van de Pinia Store Demo template geladen in een browser.<\/figcaption><\/figure>\n<p>Dit voorbeeld illustreert de voordelen van Pinia:<\/p>\n<ul>\n<li><strong>Eenvoud<\/strong> &#8211; Pinia biedt directe toegang tot de state van de store zonder mapping-functies. In tegenstelling tot Vuex heb je <code>mapState<\/code> (of vergelijkbare helpers) nodig om dezelfde toegang te krijgen.<\/li>\n<li><strong>Directe toegang tot de store<\/strong> &#8211; Met Pinia heb je direct toegang tot state properties (zoals <code>store.count<\/code>), waardoor je code leesbaarder en begrijpelijker wordt. Ondertussen vereist Vuex vaak getters om zelfs fundamentele eigenschappen te benaderen, wat complexiteit toevoegt die de leesbaarheid vermindert.<\/li>\n<li><strong>Compositie API compatibiliteit<\/strong> &#8211; Zoals de setup methode laat zien, sluit Pinia&#8217;s integratie met de Compositie API bijzonder goed aan bij moderne <a href=\"https:\/\/kinsta.com\/blog\/vue-component-libraries\/\">Vue<\/a> ontwikkeling, waardoor een meer uniforme codeerervaring ontstaat.<\/li>\n<\/ul>\n<h2>State wijzigen met Pinia<\/h2>\n<p>In Pinia pas je de state van een store aan met acties, die flexibeler zijn dan Vuex mutaties. Overweeg de volgende functie-call, die de property <code>count<\/code> van de state verhoogt:<\/p>\n<pre><code class=\"language-js\">store.increment(); \/\/ Increments the count<\/code><\/pre>\n<p>Een Vuex equivalent daarentegen bevat het defini\u00ebren van een mutatie naast ten minste \u00e9\u00e9n actie:<\/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>De Pinia actie en de equivalente Vuex code illustreren een cruciaal verschil tussen de complexiteit van de bibliotheken. Laten we deze verschillen verder onderzoeken:<\/p>\n<ul>\n<li><strong>Directe versus indirecte statemutatie<\/strong> &#8211; Zoals de <code>increment<\/code> actie laat zien, muteren Pinia acties direct de state van de store. In Vuex kun je de state alleen veranderen met mutaties, die je moet <em>vastleggen<\/em> met acties. Deze processcheiding zorgt ervoor dat je state-veranderingen traceerbaar zijn, maar het is complexer en stijver dan vergelijkbare Pinia acties.<\/li>\n<li><strong>Asynchrone versus synchrone bewerkingen<\/strong> &#8211; Terwijl Vuex mutaties altijd synchroon zijn en geen asynchrone processen kunnen bevatten, kunnen Pinia acties zowel synchrone <em>als<\/em> asynchrone code bevatten. Als gevolg hiervan kun je API calls of andere asynchrone bewerkingen direct binnen acties uitvoeren, wat zorgt voor een slankere en beknoptere codebase.<\/li>\n<li><strong>Vereenvoudigde syntax<\/strong> &#8211; Vuex vereist vaak het defini\u00ebren van mutaties en het aanroepen van acties om ze te committen. Pinia maakt een einde aan deze noodzaak. De mogelijkheid om de staat te muteren binnen acties vermindert boilerplate code en houdt je bestaande code eenvoudiger. In Vuex vereisen basis state updates het defini\u00ebren van een actie en een mutatie, zelfs als de actie alleen de mutatie vastlegt.<\/li>\n<\/ul>\n<h2>De overgang van Vuex naar Pinia<\/h2>\n<p>Overstappen op Pinia kan veel voordelen bieden in eenvoud, flexibiliteit en onderhoudbaarheid, maar het vereist zorgvuldige planning en overweging om een succesvolle implementatie te garanderen.<\/p>\n<p>Voordat je de overstap maakt, moet je voor het volgende zorgen:<\/p>\n<ol start=\"1\">\n<li>Raak vertrouwd met de verschillen tussen Pinia&#8217;s en Vuex&#8217;s architectuur, state management patterns en API&#8217;s. Inzicht in deze verschillen is cruciaal om je code effectief te refactoren en de functies van Pinia ten volle te benutten.<\/li>\n<li>Analyseer en refactoriseer je Vuex state, actions, mutations en getters zodat ze passen in Pinia&#8217;s structuur. <strong>Onthoud dat je in Pinia state definieert als een functie.<\/strong> Je kunt states direct muteren met acties en je kunt getters soepeler implementeren.<\/li>\n<li>Plan hoe je modules van je Vuex store overgaan. Pinia gebruikt modules niet op dezelfde manier als Vuex, maar je kunt nog steeds je stores structureren om vergelijkbare doelen te dienen.<\/li>\n<li>Maak gebruik van Pinia&#8217;s verbeterde TypeScript ondersteuning. Als je project <a href=\"https:\/\/kinsta.com\/nl\/blog\/wat-is-typescript\/\">TypeScript<\/a> gebruikt, overweeg dan Pinia&#8217;s verbeterde type-inferentie en typemogelijkheden voor een betere typeveiligheid en ontwikkelaarservaring.<\/li>\n<li>Herzie je teststrategie\u00ebn om veranderingen in state management aan te passen. Dit proces kan inhouden dat je moet aanpassen hoe je stores of acties in je unit- en integratietests mockt.<\/li>\n<li>Overweeg hoe de overgang de structuur en organisatie van je project be\u00efnvloedt. Houd rekening met factoren zoals naamgevingsconventies en hoe je stores importeert en gebruikt in verschillende componenten.<\/li>\n<li>Zorg voor compatibiliteit met andere bibliotheken. Controleer of er updates of wijzigingen in dependencies nodig zijn die door de overgang be\u00efnvloed kunnen worden.<\/li>\n<li>Evalueer eventuele prestatieveranderingen. Pinia is over het algemeen lichter dan Vuex, maar blijf de prestaties van je applicatie controleren tijdens en na de overgang om er zeker van te zijn dat er geen problemen zijn.<\/li>\n<\/ol>\n<p>Het converteren van een store van Vuex naar Pinia bevat verschillende stappen om de verschillen in hun structuren en API&#8217;s op te vangen. Neem de Pinia store van eerder.<\/p>\n<p>Dezelfde store in een Vuex <strong>store.js<\/strong> bestand ziet er als volgt uit.<\/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>Net als bij de vorige Pinia store bevat dit Vuex voorbeeld een <code>state<\/code> object met een enkele <code>count<\/code> property die is ge\u00efnitialiseerd op <code>0<\/code>.<\/p>\n<p>Het <code>mutations<\/code> object bevat methoden om de state direct te muteren, terwijl de methoden van het <code>actions<\/code> object de <code>increment<\/code> mutatie vastleggen.<\/p>\n<p>Vervolgens bevat het <code>getters<\/code> object de <code>doubleCount<\/code> methode, die de <code>count<\/code> state vermenigvuldigt met <code>2<\/code> en het resultaat teruggeeft.<\/p>\n<p>Zoals deze code laat zien, zijn er bij het implementeren van een store in Pinia een aantal opmerkelijke verschillen met Vuex:<\/p>\n<ul>\n<li><strong>Initialisatie<\/strong> &#8211; Pinia heeft <code>Vue.use()<\/code> niet nodig.<\/li>\n<li><strong>Structuur<\/strong> &#8211; In Pinia is de state een functie die een object retourneert, wat een betere TypeScript ondersteuning en reactiviteit mogelijk maakt.<\/li>\n<li><strong>Acties<\/strong> &#8211; Acties in Pinia zijn methoden die de state direct muteren zonder dat er mutaties nodig zijn, wat de code vereenvoudigt.<\/li>\n<li><strong>Getters<\/strong> &#8211; Hoewel vergelijkbaar met Vuex, worden Getters in Pinia gedefinieerd in de storedefinitie en hebben ze direct toegang tot de state.<\/li>\n<\/ul>\n<h3>Zo gebruik je de store in componenten<\/h3>\n<p>Met Vuex zou je de store als volgt kunnen gebruiken:<\/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>Voor Pinia wordt het gebruik:<\/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=\"Screenshot van de Pinia Store Demo landingspagina in verschillende stappen: 0, 2 en 4.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Pinia storeconversies.<\/figcaption><\/figure>\n<p>Dit voorbeeld behandelt een eenvoudige conversie. Voor complexere Vuex stores, vooral die met modules, zou de conversie een meer gedetailleerde herstructurering inhouden om aan te sluiten bij de architectuur van Pinia.<\/p>\n<h2>Zo deploy je je Vue applicatie<\/h2>\n<p>Meld je voor het deployen aan voor een gratis trial van <a href=\"https:\/\/sevalla.com\/application-hosting\/\">Kinsta&#8217;s Application Hosting dienst<\/a>. Je zult de applicatie deployen <a href=\"https:\/\/docs.sevalla.com\/templates\/overviewnodejs-examples#node-js-application-with-a-dockerfile\">met behulp van een Dockerfile<\/a>.<\/p>\n<p>Maak een <strong>Dockerfile<\/strong> aan in de root van je project en plak de volgende inhoud erin:<\/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>Deze code instrueert Kinsta&#8217;s Docker engine om Node.js te installeren (<code>FROM node:latest<\/code>), de werkdirectory aan te maken (<code>WORKDIR \/app<\/code>), de node modules uit het <strong>package.json<\/strong> bestand te installeren (<code>RUN npm install<\/code>) en het <a href=\"https:\/\/docs.sevalla.com\/templates\/overviewnodejs-examples#start-command\">start (<code>CMD [\"npm\", \"run\", \"start\"]<\/code>)<\/a> in die wordt aangeroepen wanneer de <a href=\"https:\/\/kinsta.com\/nl\/onderwerpen\/vue-js\/\">Vue<\/a> app start. De commando&#8217;s <code>COPY<\/code> kopi\u00ebren de opgegeven bestanden of mappen naar de werkmap.<\/p>\n<p>Daarna push je je code naar een Git provider van je voorkeur (<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> of <a href=\"https:\/\/docs.sevalla.com\/applications\/git\/gitlab#authorize-the-kinsta-gitlab-application\">GitLab<\/a>). Als je repo klaar is, volg dan deze stappen om je app te deployen naar Kinsta:<\/p>\n<ol start=\"1\">\n<li>Log in of maak een account aan om je <a href=\"https:\/\/my.kinsta.com\/?lang=nl\" target=\"_blank\" rel=\"noopener noreferrer\">MyKinsta<\/a> dashboard te bekijken.<\/li>\n<li>Autoriseer Kinsta met je Git provider.<\/li>\n<li>Selecteer <strong>Applicatie<\/strong> op de linker zijbalk en klik op de knop <strong>Applicatie toevoegen<\/strong>.<\/li>\n<li>Kies in het modal dat verschijnt de repository die je wilt deployen. Als je meerdere branches hebt, kun je de gewenste branch selecteren en een naam geven aan je applicatie.<\/li>\n<li>Selecteer een van de beschikbare datacenterlocaties.<\/li>\n<li>Kies je bouwomgeving en selecteer <strong>Dockerfile gebruiken om container image op te zetten<\/strong>.<\/li>\n<li>Als je Dockerfile niet in de root van je repo staat, gebruik dan <strong>Context<\/strong> om het pad aan te geven en klik op <strong>Doorgaan<\/strong>.<\/li>\n<li>Je kunt het <strong>Start commando <\/strong>leeg laten. Kinsta gebruikt <code>npm start<\/code> om je applicatie te starten.<\/li>\n<li>Selecteer de pod-grootte en het aantal instanties dat het meest geschikt is voor je app en klik op <strong>Doorgaan<\/strong>.<\/li>\n<li>Vul je creditcardgegevens in en klik op <strong>Applicatie maken<\/strong>.<\/li>\n<\/ol>\n<p>Als alternatief voor applicatiehosting kun je ervoor kiezen om je Vue applicatie als een statische site te deployen met de gratis <a href=\"https:\/\/sevalla.com\/static-site-hosting\/\">Statische Site Hosting<\/a> van Kinsta.<\/p>\n<h2>Samenvatting<\/h2>\n<p>De overgang van Vuex naar Pinia is een belangrijke evolutie in state management binnen het Vue ecosysteem. Pinia&#8217;s eenvoud, verbeterde TypeScript ondersteuning en afstemming op Vue 3&#8217;s Composition API maken het een aantrekkelijke keuze voor moderne Vue applicaties.<\/p>\n<p>Wanneer je zover bent om je Vue applicatie bij Kinsta te hosten, krijg je toegang tot een snelle, veilige en betrouwbare infrastructuur. <a href=\"https:\/\/kinsta.com\/nl\/registreren\/\">Meld je aan bij Kinsta<\/a> en maak gebruik van onze <a href=\"https:\/\/sevalla.com\/application-hosting\/\">Applicatie Hosting<\/a> dienst.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Het Vue framework voor JavaScript is populair geworden voor het bouwen van gebruikersinterfaces en single-page applicaties (SPA&#8217;s). Om ervoor te zorgen dat je grote apps optimaal &#8230;<\/p>\n","protected":false},"author":199,"featured_media":58824,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[847,880],"class_list":["post-58823","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-javascript-frameworks","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>State management in Vue.js met Pinia - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Leer meer over Pinia, hoe het een meer lichtgewicht en intu\u00eftieve beheeraanpak biedt voor developers om gedeelde staat te beheren en er toegang toe te krijgen.\" \/>\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\/nl\/blog\/vue-pinia\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"State management in Vue.js met Pinia\" \/>\n<meta property=\"og:description\" content=\"Leer meer over Pinia, hoe het een meer lichtgewicht en intu\u00eftieve beheeraanpak biedt voor developers om gedeelde staat te beheren en er toegang toe te krijgen.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/nl\/blog\/vue-pinia\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-04-13T10:09:46+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-16T09:35:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/03\/master-state-management-in-vue-js-with-pinia-1.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=\"Leer meer over Pinia, hoe het een meer lichtgewicht en intu\u00eftieve beheeraanpak biedt voor developers om gedeelde staat te beheren en er toegang toe te krijgen.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/03\/master-state-management-in-vue-js-with-pinia-1-1024x512.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@Kinsta_NL\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_NL\" \/>\n<meta name=\"twitter:label1\" content=\"Geschreven door\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jeremy Holcombe\" \/>\n\t<meta name=\"twitter:label2\" content=\"Geschatte leestijd\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/vue-pinia\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/vue-pinia\/\"},\"author\":{\"name\":\"Jeremy Holcombe\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\"},\"headline\":\"State management in Vue.js met Pinia\",\"datePublished\":\"2024-04-13T10:09:46+00:00\",\"dateModified\":\"2024-04-16T09:35:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/vue-pinia\/\"},\"wordCount\":2168,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/vue-pinia\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/03\/master-state-management-in-vue-js-with-pinia.jpg\",\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/vue-pinia\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/vue-pinia\/\",\"url\":\"https:\/\/kinsta.com\/nl\/blog\/vue-pinia\/\",\"name\":\"State management in Vue.js met Pinia - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/vue-pinia\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/vue-pinia\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/03\/master-state-management-in-vue-js-with-pinia.jpg\",\"datePublished\":\"2024-04-13T10:09:46+00:00\",\"dateModified\":\"2024-04-16T09:35:04+00:00\",\"description\":\"Leer meer over Pinia, hoe het een meer lichtgewicht en intu\u00eftieve beheeraanpak biedt voor developers om gedeelde staat te beheren en er toegang toe te krijgen.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/vue-pinia\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/vue-pinia\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/vue-pinia\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/03\/master-state-management-in-vue-js-with-pinia.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/03\/master-state-management-in-vue-js-with-pinia.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/vue-pinia\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/nl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Vue.js\",\"item\":\"https:\/\/kinsta.com\/nl\/onderwerpen\/vue-js\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"State management in Vue.js met Pinia\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/nl\/#website\",\"url\":\"https:\/\/kinsta.com\/nl\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Snelle, veilige, premium hostingoplossingen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/nl\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"nl-NL\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/nl\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/\",\"https:\/\/x.com\/Kinsta_NL\",\"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\/nl\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\",\"name\":\"Jeremy Holcombe\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/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\/nl\/blog\/author\/jeremyholcombe\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"State management in Vue.js met Pinia - Kinsta\u00ae","description":"Leer meer over Pinia, hoe het een meer lichtgewicht en intu\u00eftieve beheeraanpak biedt voor developers om gedeelde staat te beheren en er toegang toe te krijgen.","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\/nl\/blog\/vue-pinia\/","og_locale":"nl_NL","og_type":"article","og_title":"State management in Vue.js met Pinia","og_description":"Leer meer over Pinia, hoe het een meer lichtgewicht en intu\u00eftieve beheeraanpak biedt voor developers om gedeelde staat te beheren en er toegang toe te krijgen.","og_url":"https:\/\/kinsta.com\/nl\/blog\/vue-pinia\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","article_published_time":"2024-04-13T10:09:46+00:00","article_modified_time":"2024-04-16T09:35:04+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/03\/master-state-management-in-vue-js-with-pinia-1.jpg","type":"image\/jpeg"}],"author":"Jeremy Holcombe","twitter_card":"summary_large_image","twitter_description":"Leer meer over Pinia, hoe het een meer lichtgewicht en intu\u00eftieve beheeraanpak biedt voor developers om gedeelde staat te beheren en er toegang toe te krijgen.","twitter_image":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/03\/master-state-management-in-vue-js-with-pinia-1-1024x512.jpg","twitter_creator":"@Kinsta_NL","twitter_site":"@Kinsta_NL","twitter_misc":{"Geschreven door":"Jeremy Holcombe","Geschatte leestijd":"12 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/nl\/blog\/vue-pinia\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/blog\/vue-pinia\/"},"author":{"name":"Jeremy Holcombe","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21"},"headline":"State management in Vue.js met Pinia","datePublished":"2024-04-13T10:09:46+00:00","dateModified":"2024-04-16T09:35:04+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/vue-pinia\/"},"wordCount":2168,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/nl\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/vue-pinia\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/03\/master-state-management-in-vue-js-with-pinia.jpg","inLanguage":"nl-NL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/nl\/blog\/vue-pinia\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/nl\/blog\/vue-pinia\/","url":"https:\/\/kinsta.com\/nl\/blog\/vue-pinia\/","name":"State management in Vue.js met Pinia - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/vue-pinia\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/vue-pinia\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/03\/master-state-management-in-vue-js-with-pinia.jpg","datePublished":"2024-04-13T10:09:46+00:00","dateModified":"2024-04-16T09:35:04+00:00","description":"Leer meer over Pinia, hoe het een meer lichtgewicht en intu\u00eftieve beheeraanpak biedt voor developers om gedeelde staat te beheren en er toegang toe te krijgen.","breadcrumb":{"@id":"https:\/\/kinsta.com\/nl\/blog\/vue-pinia\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/nl\/blog\/vue-pinia\/"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/blog\/vue-pinia\/#primaryimage","url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/03\/master-state-management-in-vue-js-with-pinia.jpg","contentUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/03\/master-state-management-in-vue-js-with-pinia.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/nl\/blog\/vue-pinia\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/nl\/"},{"@type":"ListItem","position":2,"name":"Vue.js","item":"https:\/\/kinsta.com\/nl\/onderwerpen\/vue-js\/"},{"@type":"ListItem","position":3,"name":"State management in Vue.js met Pinia"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/nl\/#website","url":"https:\/\/kinsta.com\/nl\/","name":"Kinsta\u00ae","description":"Snelle, veilige, premium hostingoplossingen","publisher":{"@id":"https:\/\/kinsta.com\/nl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/nl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"nl-NL"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/nl\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/nl\/","logo":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","https:\/\/x.com\/Kinsta_NL","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\/nl\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21","name":"Jeremy Holcombe","image":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/#\/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\/nl\/blog\/author\/jeremyholcombe\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/58823","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/users\/199"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/comments?post=58823"}],"version-history":[{"count":6,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/58823\/revisions"}],"predecessor-version":[{"id":59088,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/58823\/revisions\/59088"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/58823\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/58823\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/58823\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/58823\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/58823\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/58823\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/58823\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/58823\/translations\/es"},{"href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/58823\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media\/58824"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media?parent=58823"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/tags?post=58823"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/topic?post=58823"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}