{"id":69442,"date":"2024-03-13T12:08:45","date_gmt":"2024-03-13T11:08:45","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=69442&#038;preview=true&#038;preview_id=69442"},"modified":"2024-03-18T09:15:58","modified_gmt":"2024-03-18T08:15:58","slug":"vue-pinia","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/vue-pinia\/","title":{"rendered":"Master State Management in Vue.js"},"content":{"rendered":"<p>Das <a href=\"https:\/\/kinsta.com\/de\/thema\/vue-js\/\">Vue-Framework f\u00fcr JavaScript<\/a> ist f\u00fcr die Erstellung von Benutzeroberfl\u00e4chen und Single-Page-Anwendungen (SPAs) sehr beliebt geworden. Um sicherzustellen, dass deine gro\u00dfen Anwendungen optimal funktionieren, musst du das Zustandsmanagement beherrschen &#8211; den Prozess der Verwaltung und Zentralisierung der reaktiven Daten (Zust\u00e4nde) einer Anwendung \u00fcber mehrere Komponenten hinweg.<\/p>\n<p>In Vue basiert das Zustandsmanagement seit langem auf Vuex, einer Bibliothek mit einem zentralen Speicher f\u00fcr alle Komponenten einer Anwendung. Die j\u00fcngsten Fortschritte im Vue-\u00d6kosystem haben jedoch den Nachfolger von Vuex, Pinia, hervorgebracht.<\/p>\n<p>Pinia bietet einen schlankeren, modulareren und intuitiveren Verwaltungsansatz. Es l\u00e4sst sich nahtlos in das Reaktivit\u00e4tssystem und die Composition API von Vue integrieren und macht es Entwicklern leicht, gemeinsame Zust\u00e4nde auf skalierbare und wartbare Weise zu verwalten und darauf zuzugreifen.<\/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>Die Ausgangslage: Pinia vs. Vuex<\/h2>\n<p>Als Standardbibliothek f\u00fcr die Zustandsverwaltung in Vue-Anwendungen bot Vuex einen zentralen Speicher f\u00fcr alle Komponenten einer Anwendung. Mit der Weiterentwicklung von Vue stellt Pinia jedoch eine modernere L\u00f6sung dar. Wir wollen herausfinden, wie sie sich von Vuex unterscheidet.<\/p>\n<ul>\n<li><strong>API-Unterschiede &#8211;<\/strong> Die Composition-API von Pinia bietet eine grundlegendere und intuitivere API als Vuex, die es einfacher macht, den Zustand der Anwendung zu verwalten. Au\u00dferdem \u00e4hnelt ihre Struktur stark der Options-API von Vue, die den meisten Vue-Entwicklern vertraut ist.<\/li>\n<li><strong>Typing-Unterst\u00fctzung &#8211;<\/strong> In der Vergangenheit hatten viele Vue-Entwickler mit der begrenzten Typ-Unterst\u00fctzung von Vuex zu k\u00e4mpfen. Im Gegensatz dazu ist Pinia eine vollst\u00e4ndig typisierte Zustandsmanagement-Bibliothek, die diese Bedenken ausr\u00e4umt. Ihre Typsicherheit hilft, potenzielle Laufzeitfehler zu vermeiden, tr\u00e4gt zur Lesbarkeit des Codes bei und erm\u00f6glicht eine reibungslosere Skalierung.<\/li>\n<li><strong>Reaktivit\u00e4tssystem &#8211;<\/strong> Beide Bibliotheken nutzen das Reaktivit\u00e4tssystem von Vue, aber der Ansatz von Pinia ist enger an die Composition API von Vue 3 angelehnt. Die Reaktivit\u00e4ts-API ist zwar leistungsstark, aber die Verwaltung komplexer Zust\u00e4nde in gro\u00dfen Anwendungen kann eine Herausforderung sein. Zum Gl\u00fcck erleichtert die einfache und flexible Architektur von Pinia die Verwaltung von Zust\u00e4nden in deinen Vue 3-Anwendungen. Mit dem Store-Pattern von Pinia kannst du einen Store definieren, der einen bestimmten Teil des Anwendungsstatus verwaltet, seine Organisation vereinfacht und ihn mit anderen Komponenten teilt.<\/li>\n<li><strong>Geringes Gewicht &#8211;<\/strong> Mit nur 1 KB f\u00fcgt sich Pinia nahtlos in deine Entwicklungsumgebung ein und kann durch sein geringes Gewicht die Leistung und Ladezeiten deiner Anwendung verbessern.<\/li>\n<\/ul>\n<h2>So richtest du ein Vue-Projekt mit Pinia ein<\/h2>\n<p>Um Pinia in ein Vue-Projekt zu integrieren, initialisiere dein Projekt mit Vue CLI oder Vite. Nach der Projektinitialisierung kannst du Pinia \u00fcber npm oder yarn als Abh\u00e4ngigkeit installieren.<\/p>\n<ol start=\"1\">\n<li>Erstelle ein neues Vue-Projekt mit Vue CLI oder Vite. Befolge dann die Anweisungen, um dein Projekt einzurichten.\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>Wechsle dein Verzeichnis in den neu erstellten Projektordner:\n<pre><code class=\"language-bash\">cd my-vue-app<\/code><\/pre>\n<\/li>\n<li>Installiere Pinia als eine Abh\u00e4ngigkeit in deinem Projekt.\n<pre><code class=\"language-bash\">\/\/ Using npm\nnpm install pinia\n\/\/ Using yarn\nyarn add pinia<\/code><\/pre>\n<\/li>\n<li>Importiere Pinia in deiner Haupteingabedatei (normalerweise <strong>main.js<\/strong> oder <strong>main.ts<\/strong>) und befehle Vue es zu verwenden:\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>Wenn du Pinia in deinem Vue-Projekt installiert und eingerichtet hast, kannst du Stores f\u00fcr die Zustandsverwaltung definieren und verwenden.<\/li>\n<\/ol>\n<h2>Wie man einen Store in Pinia erstellt<\/h2>\n<p>Der Store ist das R\u00fcckgrat der Zustandsverwaltung in deiner Vue-Anwendung, die mit Pinia betrieben wird. Er hilft dir, anwendungsweite Daten auf koh\u00e4rente und koordinierte Weise zu verwalten. Im Store definierst, speicherst und verwaltest du die Daten, die von den verschiedenen Komponenten deiner Anwendung gemeinsam genutzt werden sollen.<\/p>\n<p>Diese Zentralisierung ist wichtig, denn sie strukturiert und organisiert die Zustands\u00e4nderungen deiner Anwendung und macht den Datenfluss vorhersehbarer und einfacher zu debuggen.<\/p>\n<p>Au\u00dferdem kann ein Store in Pinia mehr als nur den Status speichern: Mit den integrierten Funktionen von Pinia kannst du den Status \u00fcber Aktionen aktualisieren und abgeleitete Status \u00fcber Getter berechnen. Diese eingebauten Funktionen tragen zu einer effizienteren und besser wartbaren Codebasis bei.<\/p>\n<p>Das folgende Beispiel zeigt, wie du einen einfachen Pinia-Store in der Datei <strong>src\/store.js<\/strong> deines Projekts erstellst.<\/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>Wie man auf den Store-Status in Komponenten zugreift<\/h2>\n<p>Im Vergleich zu Vuex ist der Ansatz von Pinia f\u00fcr den Zugriff auf und die Verwaltung von Zust\u00e4nden intuitiver, vor allem wenn du mit der Composition API von Vue 3 vertraut bist. Bei dieser API handelt es sich um eine Reihe von Funktionen, mit denen du reaktive und komponierbare Logik in deine Komponenten einbauen kannst.<\/p>\n<p>Betrachte den folgenden 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>Im obigen Codeausschnitt enth\u00e4lt der <code>&lt;template&gt;<\/code> Tag das definierte <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-html\/\">HTML-Markup<\/a> deiner Komponente. Um den Wert der Eigenschaft <code>count<\/code> aus dem Pinia-Speicher anzuzeigen, verwendest du die Datenbindungssyntax von Vue, ausgedr\u00fcckt als <code>{{ count }}<\/code>.<\/p>\n<p>Die Funktion <code>useStore<\/code> erm\u00f6glicht den Zugriff auf den Pinia-Speicher, also importierst du ihn mit <code>import { useStore } from '.\/store';<\/code> aus <strong>store.js<\/strong>.<\/p>\n<p>Die Funktion <code>setup<\/code> ist ein Feature der Composition API von Vue 3 und definiert den reaktiven Zustand und die Logik deiner Komponente. Innerhalb der Funktion rufst du dann <code>useStore()<\/code> auf, um auf den Pinia-Store zuzugreifen.<\/p>\n<p>Als N\u00e4chstes greift <code>const count = store.count<\/code> auf die Eigenschaft <code>count<\/code> des Stores zu und macht sie in der Komponente verf\u00fcgbar.<\/p>\n<p>Schlie\u00dflich gibt <code>setup<\/code> die <code>count<\/code> zur\u00fcck, damit das Template sie rendern kann. Das Reaktivit\u00e4tssystem von Vue bedeutet, dass das Template deiner Komponente den Wert von <code>count<\/code> aktualisiert, sobald er sich im Store \u00e4ndert.<\/p>\n<p>Unten siehst du einen Screenshot der Ausgabe.<\/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 der Pinia Store Demo-Vorlage, die in einem Browser geladen wurde\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Screenshot der Pinia Store Demo-Vorlage, die in einem Browser geladen wurde<\/figcaption><\/figure>\n<p>Dieses Beispiel veranschaulicht die Vorteile von Pinia:<\/p>\n<ul>\n<li><strong>Einfachheit<\/strong> &#8211; Pinia erm\u00f6glicht den direkten Zugriff auf den Zustand des Stores ohne Mapping-Funktionen. Im Gegensatz dazu ben\u00f6tigt Vuex <code>mapState<\/code> (oder \u00e4hnliche Helfer), um den gleichen Zugriff zu erreichen.<\/li>\n<li><strong>Direkter Speicherzugriff<\/strong> &#8211; Mit Pinia kannst du direkt auf Statuseigenschaften (wie <code>store.count<\/code>) zugreifen, was deinen Code lesbarer und verst\u00e4ndlicher macht. In Vuex sind dagegen oft Getter erforderlich, um selbst auf grundlegende Eigenschaften zuzugreifen, was die Komplexit\u00e4t erh\u00f6ht und die Lesbarkeit beeintr\u00e4chtigt.<\/li>\n<li><strong>Kompatibilit\u00e4t mit der Composition API<\/strong> &#8211; Wie die Setup-Methode zeigt, passt Pinia besonders gut zur modernen <a href=\"https:\/\/kinsta.com\/de\/blog\/vue-komponenten-bibliotheken\/\">Vue-Entwicklung<\/a> und sorgt f\u00fcr eine einheitlichere Codierung.<\/li>\n<\/ul>\n<h2>Wie du den Status mit Pinia \u00e4nderst<\/h2>\n<p>In Pinia \u00e4nderst du den Zustand eines Ladens mit Aktionen, die flexibler sind als Vuex-Mutationen. Betrachte den folgenden Funktionsaufruf, der die Eigenschaft <code>count<\/code> erh\u00f6ht:<\/p>\n<pre><code class=\"language-js\">store.increment(); \/\/ Increments the count<\/code><\/pre>\n<p>Das \u00c4quivalent in Vuex hingegen besteht darin, neben mindestens einer Aktion auch eine Mutation zu definieren:<\/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>Die Pinia-Aktion und ihr \u00c4quivalent in Vuex verdeutlichen einen entscheidenden Unterschied in der Komplexit\u00e4t des Codes der Bibliotheken. Lass uns diese Unterschiede genauer untersuchen:<\/p>\n<ul>\n<li><strong>Direkte versus indirekte Zustands\u00e4nderung<\/strong> &#8211; Wie die Aktion <code>increment<\/code> zeigt, \u00e4ndern Pinia-Aktionen den Zustand des Stores direkt. In Vuex kannst du den Zustand nur mit Mutationen \u00e4ndern, die du mit Aktionen <em>\u00fcbertragen<\/em> musst. Diese Prozesstrennung stellt sicher, dass deine Zustands\u00e4nderungen nachvollziehbar sind, aber sie ist komplexer und starrer als vergleichbare Pinia-Aktionen.<\/li>\n<li><strong>Asynchrone versus synchrone Operationen<\/strong> &#8211; W\u00e4hrend Vuex-Mutationen immer synchron sind und keine asynchronen Prozesse enthalten k\u00f6nnen, k\u00f6nnen Pinia-Aktionen synchronen <em>und<\/em> asynchronen Code enthalten. Daher kannst du API-Aufrufe oder andere asynchrone Operationen direkt in Aktionen ausf\u00fchren, was zu einer schlankeren und \u00fcbersichtlicheren Codebasis f\u00fchrt.<\/li>\n<li><strong>Vereinfachte Syntax<\/strong> &#8211; In Vuex m\u00fcssen oft Mutationen definiert und Aktionen aufgerufen werden, um sie zu \u00fcbertragen. Mit Pinia ist das nicht mehr n\u00f6tig. Die M\u00f6glichkeit, den Zustand innerhalb von Aktionen zu ver\u00e4ndern, reduziert den Boilerplate-Code und macht deinen bestehenden Code \u00fcbersichtlicher. In Vuex m\u00fcssen f\u00fcr grundlegende Zustandsaktualisierungen eine Aktion und eine Mutation definiert werden, selbst wenn die Aktion nur die Mutation festschreibt.<\/li>\n<\/ul>\n<h2>Der \u00dcbergang von Vuex zu Pinia<\/h2>\n<p>Der Umstieg auf Pinia kann zahlreiche Vorteile in Bezug auf Einfachheit, Flexibilit\u00e4t und Wartbarkeit bieten, erfordert aber eine sorgf\u00e4ltige Planung und \u00dcberlegung, um eine erfolgreiche Implementierung zu gew\u00e4hrleisten.<\/p>\n<p>Bevor du umsteigst, solltest du Folgendes beachten:<\/p>\n<ol start=\"1\">\n<li>Mache dich mit den Unterschieden zwischen der Architektur von Pinia und Vuex, den Mustern f\u00fcr die Zustandsverwaltung und den APIs vertraut. Das Verst\u00e4ndnis dieser Unterschiede ist entscheidend, um deinen Code effektiv zu refaktorisieren und die Funktionen von Pinia voll auszusch\u00f6pfen.<\/li>\n<li>Analysiere deinen Vuex-Zustand, deine Actions, Mutationen und Getter und passe sie an die Struktur von Pinia an. <strong>Denke daran, dass du in Pinia den Zustand als Funktion definierst.<\/strong> Du kannst Zust\u00e4nde direkt mit Actions ver\u00e4ndern und Getters reibungsloser implementieren.<\/li>\n<li>Plane, wie du die Module deines Vuex-Lagers umwandeln kannst. Pinia verwendet zwar keine Module wie Vuex, aber du kannst deine Stores trotzdem so strukturieren, dass sie \u00e4hnliche Zwecke erf\u00fcllen.<\/li>\n<li>Nutze die verbesserte TypeScript-Unterst\u00fctzung von Pinia. Wenn dein Projekt <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-typescript\/\">TypeScript<\/a> verwendet, solltest du Pinias verbesserte Typinferenz- und Typisierungsfunktionen in Betracht ziehen, um die Typsicherheit und die Erfahrung der Entwickler zu verbessern.<\/li>\n<li>\u00dcberarbeite deine Teststrategien, um die \u00c4nderungen in der Zustandsverwaltung zu ber\u00fccksichtigen. Dies kann bedeuten, dass du die Art und Weise, wie du Speicher oder Aktionen in deinen Unit- und Integrationstests simulierst, aktualisierst.<\/li>\n<li>\u00dcberlege, wie sich die Umstellung auf die Struktur und Organisation deines Projekts auswirkt. Ber\u00fccksichtige Faktoren wie Namenskonventionen und die Art und Weise, wie du Stores komponenten\u00fcbergreifend importierst und verwendest.<\/li>\n<li>Stelle die Kompatibilit\u00e4t mit anderen Bibliotheken sicher. \u00dcberpr\u00fcfe, ob die Umstellung Auswirkungen auf erforderliche Aktualisierungen oder \u00c4nderungen von Abh\u00e4ngigkeiten haben k\u00f6nnte.<\/li>\n<li>Beurteile alle Leistungs\u00e4nderungen. Pinia ist in der Regel schlanker als Vuex, aber \u00fcberwache die Leistung deiner Anwendung w\u00e4hrend und nach der Umstellung, um sicherzustellen, dass es keine Probleme gibt.<\/li>\n<\/ol>\n<p>Die Umstellung eines Stores von Vuex auf Pinia erfordert mehrere Schritte, um die Unterschiede in den Strukturen und APIs zu ber\u00fccksichtigen. Betrachte den Pinia-Store von vorhin.<\/p>\n<p>Derselbe Store sieht in einer Vuex <strong>store.js-Datei<\/strong> wie folgt aus.<\/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>Wie der vorherige Pinia-Store enth\u00e4lt auch dieses Vuex-Beispiel ein <code>state<\/code> -Objekt mit einer einzigen <code>count<\/code> -Eigenschaft, die auf <code>0<\/code> initialisiert ist.<\/p>\n<p>Das <code>mutations<\/code> Objekt enth\u00e4lt Methoden, um den Zustand direkt zu ver\u00e4ndern, w\u00e4hrend die Methoden des <code>actions<\/code> Objekts die <code>increment<\/code> Ver\u00e4nderung festschreiben.<\/p>\n<p>Dann enth\u00e4lt das <code>getters<\/code> Objekt die Methode <code>doubleCount<\/code>, die den Zustand <code>count<\/code> mit <code>2<\/code> multipliziert und das Ergebnis zur\u00fcckgibt.<\/p>\n<p>Wie dieser Code zeigt, gibt es bei der Implementierung eines Stores in Pinia einige deutliche Unterschiede zu Vuex:<\/p>\n<ul>\n<li><strong>Initialisierung<\/strong> &#8211; Pinia ben\u00f6tigt keine <code>Vue.use()<\/code>.<\/li>\n<li><strong>Struktur<\/strong> &#8211; In Pinia ist der Zustand eine Funktion, die ein Objekt zur\u00fcckgibt, was eine bessere TypeScript-Unterst\u00fctzung und Reaktivit\u00e4t erm\u00f6glicht.<\/li>\n<li><strong>Aktionen<\/strong> &#8211; Aktionen in Pinia sind Methoden, die den Zustand direkt ver\u00e4ndern, ohne Mutationen zu ben\u00f6tigen, was den Code vereinfacht.<\/li>\n<li><strong>Getter<\/strong> &#8211; \u00c4hnlich wie bei Vuex werden Getter in Pinia innerhalb der Store-Definition definiert und k\u00f6nnen direkt auf den Status zugreifen.<\/li>\n<\/ul>\n<h3>Wie man den Store in Komponenten verwendet<\/h3>\n<p>Mit Vuex k\u00f6nntest du den Store wie folgt verwenden:<\/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>F\u00fcr Pinia sieht die Verwendung so aus:<\/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 der Pinia Store Demo Landing Page in verschiedenen Stufen: 0, 2, und 4.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Pinia Store-Stufen<\/figcaption><\/figure>\n<p>Dieses Beispiel deckt eine einfache Konvertierung ab. Bei komplexeren Vuex-Stores, insbesondere bei solchen, die Module verwenden, w\u00fcrde die Konvertierung eine detailliertere Umstrukturierung erfordern, um sie an die Architektur von Pinia anzupassen.<\/p>\n<h2>So stellst du deine Vue-Anwendung bereit<\/h2>\n<p>Bevor du deine Anwendung bereitstellst, melde dich f\u00fcr eine kostenlose Testversion von <a href=\"https:\/\/sevalla.com\/application-hosting\/\">Kinstas Anwendungs-Hosting-Dienst<\/a>\u00a0an. Du wirst die Anwendung <a href=\"https:\/\/docs.sevalla.com\/templates\/overviewnodejs-examples#node-js-application-with-a-dockerfile\">mit Hilfe einer Dockerdatei<\/a> bereitstellen.<\/p>\n<p>Erstelle ein <strong>Dockerfile<\/strong> im Stammverzeichnis deines Projekts und f\u00fcge die folgenden Inhalte ein:<\/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>Dieser Code weist die Docker-Engine von Kinsta an, Node.js zu installieren (<code>FROM node:latest<\/code>), das Arbeitsverzeichnis zu erstellen (<code>WORKDIR \/app<\/code>), die Node-Module aus der <strong>package.json-Datei<\/strong> zu installieren (<code>RUN npm install<\/code>) und den <a href=\"https:\/\/docs.sevalla.com\/templates\/overviewnodejs-examples#start-command\">Start (<code>CMD [\"npm\", \"run\", \"start\"]<\/code>)<\/a>, der aufgerufen wird, wenn die <a href=\"https:\/\/kinsta.com\/de\/thema\/vue-js\/\">Vue-App<\/a> startet. Die Befehle <code>COPY<\/code> kopieren die angegebenen Dateien oder Verzeichnisse in das Arbeitsverzeichnis.<\/p>\n<p>Danach musst du deinen Code zu einem bevorzugten Git-Anbieter pushen (<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> oder <a href=\"https:\/\/docs.sevalla.com\/applications\/git\/gitlab#authorize-the-kinsta-gitlab-application\">GitLab<\/a>). Sobald dein Repo fertig ist, befolge diese Schritte, um deine Anwendung auf Kinsta bereitzustellen:<\/p>\n<ol start=\"1\">\n<li>Logge dich ein oder erstelle ein Konto, um dein <a href=\"https:\/\/my.kinsta.com\/?lang=de\" target=\"_blank\" rel=\"noopener noreferrer\">MyKinsta-Dashboard<\/a> zu sehen.<\/li>\n<li>Autorisiere Kinsta mit deinem Git-Anbieter.<\/li>\n<li>W\u00e4hle in der linken Seitenleiste <strong>Anwendung<\/strong> aus und klicke auf die Schaltfl\u00e4che <strong>Anwendung hinzuf\u00fcgen<\/strong>.<\/li>\n<li>W\u00e4hle im erscheinenden Modal das Repository aus, das du bereitstellen m\u00f6chtest. Wenn du mehrere Zweige hast, kannst du den gew\u00fcnschten Zweig ausw\u00e4hlen und einen Namen f\u00fcr deine Anwendung vergeben.<\/li>\n<li>W\u00e4hle einen der verf\u00fcgbaren Rechenzentrumsstandorte.<\/li>\n<li>W\u00e4hle deine Build-Umgebung und w\u00e4hle <strong>Dockerfile verwenden, um das Container-Image zu erstellen<\/strong>.<\/li>\n<li>Wenn sich deine Dockerdatei nicht im Stammverzeichnis deines Repos befindet, gib ihren Pfad mit <strong>Context<\/strong> an und klicke auf <strong>Weiter<\/strong>.<\/li>\n<li>Du kannst den Eintrag <strong>Startbefehl<\/strong>\u00a0leer lassen. Kinsta verwendet <code>npm start<\/code>, um deine Anwendung zu starten.<\/li>\n<li>W\u00e4hle die Pod-Gr\u00f6\u00dfe und die Anzahl der Instanzen, die f\u00fcr deine Anwendung am besten geeignet sind, und klicke auf <strong>Weiter<\/strong>.<\/li>\n<li>Gib deine Kreditkartendaten ein und klicke auf <strong>Anwendung erstellen<\/strong>.<\/li>\n<\/ol>\n<p>Als Alternative zum Anwendungs-Hosting kannst du deine Vue-Anwendung auch als statische Website mit dem kostenlosen <a href=\"https:\/\/sevalla.com\/static-site-hosting\/\">Statische-Seiten-Hosting<\/a> von Kinsta bereitstellen.<\/p>\n<h2>Zusammenfassung<\/h2>\n<p>Der \u00dcbergang von Vuex zu Pinia stellt eine bedeutende Entwicklung in der Zustandsverwaltung innerhalb des Vue-\u00d6kosystems dar. Die Einfachheit von Pinia, die verbesserte TypeScript-Unterst\u00fctzung und die Anpassung an die Composition API von Vue 3 machen es zu einer \u00fcberzeugenden Wahl f\u00fcr moderne Vue-Anwendungen.<\/p>\n<p>Wenn du bereit bist, deine Vue-Anwendung bei Kinsta zu hosten, kannst du auf eine schnelle, sichere und zuverl\u00e4ssige Infrastruktur zugreifen. <a href=\"https:\/\/kinsta.com\/de\/anmelden\/\">Melde dich bei Kinsta an<\/a> und nutze unseren <a href=\"https:\/\/sevalla.com\/application-hosting\/\">Anwendungs-Hosting-Dienst<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Das Vue-Framework f\u00fcr JavaScript ist f\u00fcr die Erstellung von Benutzeroberfl\u00e4chen und Single-Page-Anwendungen (SPAs) sehr beliebt geworden. Um sicherzustellen, dass deine gro\u00dfen Anwendungen optimal funktionieren, musst du &#8230;<\/p>\n","protected":false},"author":199,"featured_media":69443,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[951,987],"class_list":["post-69442","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>Meistere die Zustandsverwaltung in Vue.js mit Pinia - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Lerne Pinia kennen und erfahre, wie es Entwicklern einen schlankeren und intuitiveren Managementansatz f\u00fcr die Verwaltung und den Zugriff auf gemeinsame Zust\u00e4nde bietet.\" \/>\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\/de\/blog\/vue-pinia\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Master State Management in Vue.js\" \/>\n<meta property=\"og:description\" content=\"Lerne Pinia kennen und erfahre, wie es Entwicklern einen schlankeren und intuitiveren Managementansatz f\u00fcr die Verwaltung und den Zugriff auf gemeinsame Zust\u00e4nde bietet.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/de\/blog\/vue-pinia\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-13T11:08:45+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-18T08:15:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/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=\"Lerne Pinia kennen und erfahre, wie es Entwicklern einen schlankeren und intuitiveren Managementansatz f\u00fcr die Verwaltung und den Zugriff auf gemeinsame Zust\u00e4nde bietet.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/03\/master-state-management-in-vue-js-with-pinia.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jeremy Holcombe\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"11\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/vue-pinia\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/vue-pinia\/\"},\"author\":{\"name\":\"Jeremy Holcombe\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\"},\"headline\":\"Master State Management in Vue.js\",\"datePublished\":\"2024-03-13T11:08:45+00:00\",\"dateModified\":\"2024-03-18T08:15:58+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/vue-pinia\/\"},\"wordCount\":2146,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/vue-pinia\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/03\/master-state-management-in-vue-js-with-pinia.jpg\",\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/vue-pinia\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/vue-pinia\/\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/vue-pinia\/\",\"name\":\"Meistere die Zustandsverwaltung in Vue.js mit Pinia - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/vue-pinia\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/vue-pinia\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/03\/master-state-management-in-vue-js-with-pinia.jpg\",\"datePublished\":\"2024-03-13T11:08:45+00:00\",\"dateModified\":\"2024-03-18T08:15:58+00:00\",\"description\":\"Lerne Pinia kennen und erfahre, wie es Entwicklern einen schlankeren und intuitiveren Managementansatz f\u00fcr die Verwaltung und den Zugriff auf gemeinsame Zust\u00e4nde bietet.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/vue-pinia\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/vue-pinia\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/vue-pinia\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/03\/master-state-management-in-vue-js-with-pinia.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/03\/master-state-management-in-vue-js-with-pinia.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/vue-pinia\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Vue.js\",\"item\":\"https:\/\/kinsta.com\/de\/thema\/vue-js\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Master State Management in Vue.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/de\/#website\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/de\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\",\"https:\/\/x.com\/Kinsta_DE\",\"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\/de\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\",\"name\":\"Jeremy Holcombe\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/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\/de\/blog\/author\/jeremyholcombe\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Meistere die Zustandsverwaltung in Vue.js mit Pinia - Kinsta\u00ae","description":"Lerne Pinia kennen und erfahre, wie es Entwicklern einen schlankeren und intuitiveren Managementansatz f\u00fcr die Verwaltung und den Zugriff auf gemeinsame Zust\u00e4nde bietet.","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\/de\/blog\/vue-pinia\/","og_locale":"de_DE","og_type":"article","og_title":"Master State Management in Vue.js","og_description":"Lerne Pinia kennen und erfahre, wie es Entwicklern einen schlankeren und intuitiveren Managementansatz f\u00fcr die Verwaltung und den Zugriff auf gemeinsame Zust\u00e4nde bietet.","og_url":"https:\/\/kinsta.com\/de\/blog\/vue-pinia\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","article_published_time":"2024-03-13T11:08:45+00:00","article_modified_time":"2024-03-18T08:15:58+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/03\/master-state-management-in-vue-js-with-pinia.jpg","type":"image\/jpeg"}],"author":"Jeremy Holcombe","twitter_card":"summary_large_image","twitter_description":"Lerne Pinia kennen und erfahre, wie es Entwicklern einen schlankeren und intuitiveren Managementansatz f\u00fcr die Verwaltung und den Zugriff auf gemeinsame Zust\u00e4nde bietet.","twitter_image":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/03\/master-state-management-in-vue-js-with-pinia.jpg","twitter_creator":"@Kinsta_DE","twitter_site":"@Kinsta_DE","twitter_misc":{"Verfasst von":"Jeremy Holcombe","Gesch\u00e4tzte Lesezeit":"11\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/de\/blog\/vue-pinia\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/blog\/vue-pinia\/"},"author":{"name":"Jeremy Holcombe","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21"},"headline":"Master State Management in Vue.js","datePublished":"2024-03-13T11:08:45+00:00","dateModified":"2024-03-18T08:15:58+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/vue-pinia\/"},"wordCount":2146,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/vue-pinia\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/03\/master-state-management-in-vue-js-with-pinia.jpg","inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/de\/blog\/vue-pinia\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/de\/blog\/vue-pinia\/","url":"https:\/\/kinsta.com\/de\/blog\/vue-pinia\/","name":"Meistere die Zustandsverwaltung in Vue.js mit Pinia - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/vue-pinia\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/vue-pinia\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/03\/master-state-management-in-vue-js-with-pinia.jpg","datePublished":"2024-03-13T11:08:45+00:00","dateModified":"2024-03-18T08:15:58+00:00","description":"Lerne Pinia kennen und erfahre, wie es Entwicklern einen schlankeren und intuitiveren Managementansatz f\u00fcr die Verwaltung und den Zugriff auf gemeinsame Zust\u00e4nde bietet.","breadcrumb":{"@id":"https:\/\/kinsta.com\/de\/blog\/vue-pinia\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/de\/blog\/vue-pinia\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/blog\/vue-pinia\/#primaryimage","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/03\/master-state-management-in-vue-js-with-pinia.jpg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/03\/master-state-management-in-vue-js-with-pinia.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/de\/blog\/vue-pinia\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/de\/"},{"@type":"ListItem","position":2,"name":"Vue.js","item":"https:\/\/kinsta.com\/de\/thema\/vue-js\/"},{"@type":"ListItem","position":3,"name":"Master State Management in Vue.js"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/de\/#website","url":"https:\/\/kinsta.com\/de\/","name":"Kinsta\u00ae","description":"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen","publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/de\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","https:\/\/x.com\/Kinsta_DE","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\/de\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21","name":"Jeremy Holcombe","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/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\/de\/blog\/author\/jeremyholcombe\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/69442","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/users\/199"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/comments?post=69442"}],"version-history":[{"count":5,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/69442\/revisions"}],"predecessor-version":[{"id":69508,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/69442\/revisions\/69508"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/69442\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/69442\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/69442\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/69442\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/69442\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/69442\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/69442\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/69442\/translations\/es"},{"href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/69442\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media\/69443"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media?parent=69442"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/tags?post=69442"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/topic?post=69442"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}