{"id":77020,"date":"2024-03-13T12:09:32","date_gmt":"2024-03-13T11:09:32","guid":{"rendered":"https:\/\/kinsta.com\/it\/?p=77020&#038;preview=true&#038;preview_id=77020"},"modified":"2024-03-18T09:10:47","modified_gmt":"2024-03-18T08:10:47","slug":"vue-pinia","status":"publish","type":"post","link":"https:\/\/kinsta.com\/it\/blog\/vue-pinia\/","title":{"rendered":"La gestione dello stato in Vue.js"},"content":{"rendered":"<p>Il <a href=\"https:\/\/kinsta.com\/it\/argomenti\/vue-js\/\">framework Vue per JavaScript<\/a> \u00e8 diventato popolare per la creazione di interfacce utente e applicazioni a pagina singola (SPA). Per garantire che le applicazioni di grandi dimensioni funzionino in modo ottimale, \u00e8 necessario comprendere bene la gestione dello stato, ovvero il processo di gestione e centralizzazione dei dati reattivi (stato) di un&#8217;applicazione tra pi\u00f9 componenti.<\/p>\n<p>In Vue, la gestione dello stato \u00e8 stata a lungo affidata a Vuex, una libreria con un archivio centralizzato per tutti i componenti di un&#8217;applicazione. Tuttavia, i recenti progressi nell&#8217;ecosistema Vue hanno dato vita al successore di Vuex, Pinia.<\/p>\n<p>Pinia offre un approccio di gestione pi\u00f9 leggero, modulare e intuitivo. Si integra perfettamente con il sistema di reattivit\u00e0 di Vue e con l&#8217;API Composition, rendendo semplice per gli sviluppatori gestire e accedere allo stato condiviso in modo scalabile e manutenibile.<\/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>Come si presenta la situazione: Pinia vs Vuex<\/h2>\n<p>Come libreria di riferimento per la gestione dello stato nelle applicazioni Vue, Vuex forniva uno store centralizzato per tutti i componenti di un&#8217;applicazione. Tuttavia, con il progresso di Vue, Pinia rappresenta una soluzione pi\u00f9 moderna. Vediamo come si differenzia da Vuex.<\/p>\n<ul>\n<li><strong>Differenze API &#8211;<\/strong> L&#8217;API di composizione di Pinia offre un&#8217;API pi\u00f9 essenziale e intuitiva rispetto a Vuex, rendendo pi\u00f9 semplice la gestione dello stato dell&#8217;applicazione. Inoltre, la sua struttura assomiglia molto all&#8217;API Options di Vue, familiare alla maggior parte degli sviluppatori di Vue.<\/li>\n<li><strong>Supporto dei tipi &#8211;<\/strong> Storicamente, molti sviluppatori di Vue hanno avuto problemi con il limitato supporto dei tipi di Vuex. Al contrario, Pinia \u00e8 una libreria per la gestione degli stati completamente tipizzata che elimina questi problemi. La sicurezza dei tipi aiuta a prevenire potenziali errori di runtime, contribuisce alla leggibilit\u00e0 del codice e facilita la scalabilit\u00e0.<\/li>\n<li><strong>Sistema di reattivit\u00e0 &#8211;<\/strong> Entrambe le librerie sfruttano il sistema di reattivit\u00e0 di Vue, ma l&#8217;approccio di Pinia si allinea maggiormente con l&#8217;API Composition di Vue 3. Sebbene l&#8217;API di reattivit\u00e0 sia potente, la gestione di stati complessi in applicazioni di grandi dimensioni pu\u00f2 essere impegnativa. Fortunatamente, l&#8217;architettura semplice e flessibile di Pinia facilita la gestione degli stati nelle applicazioni Vue 3. Il pattern store di Pinia permette di definire uno store per la gestione di una porzione specifica dello stato dell&#8217;applicazione, semplificandone l&#8217;organizzazione e la condivisione tra i vari componenti.<\/li>\n<li><strong>Leggerezza &#8211;<\/strong> Con un peso di appena 1 KB, Pinia si integra perfettamente nell&#8217;ambiente di sviluppo e la sua leggerezza pu\u00f2 migliorare le prestazioni e i tempi di caricamento delle applicazioni.<\/li>\n<\/ul>\n<h2>Come impostare un progetto Vue con Pinia<\/h2>\n<p>Per integrare Pinia in un progetto Vue, inizializziamo il progetto con Vue CLI o Vite. Dopo l&#8217;inizializzazione del progetto, possiamo installare Pinia come dipendenza tramite npm o yarn.<\/p>\n<ol start=\"1\">\n<li>Creiamo un nuovo progetto Vue utilizzando Vue CLI o Vite. Quindi, seguiamo le istruzioni per configurare il nostro progetto.\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>Cambiamo la directory nella cartella del progetto appena creato:\n<pre><code class=\"language-bash\">cd my-vue-app<\/code><\/pre>\n<\/li>\n<li>Installiamo Pinia come dipendenza nel nostro progetto.\n<pre><code class=\"language-bash\">\/\/ Using npm\nnpm install pinia\n\/\/ Using yarn\nyarn add pinia<\/code><\/pre>\n<\/li>\n<li>Nel nostro file di inserimento principale (di solito <strong>main.js<\/strong> o <strong>main.ts<\/strong>), importiamo Pinia e diciamo a Vue di usarlo:\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>Dopo aver installato e configurato Pinia nel nostro progetto Vue, siamo pronti a definire e utilizzare gli store per la gestione degli stati.<\/li>\n<\/ol>\n<h2>Come creare uno store in Pinia<\/h2>\n<p>Lo store \u00e8 la spina dorsale della gestione dello stato in un&#8217;applicazione Vue alimentata da Pinia. Aiuta a gestire i dati dell&#8217;applicazione in modo coeso e coordinato. Lo store \u00e8 il luogo in cui definiamo, memorizziamo e gestiamo i dati da condividere tra i vari componenti dell&#8217;applicazione.<\/p>\n<p>Questa centralizzazione \u00e8 fondamentale perch\u00e9 struttura e organizza i cambiamenti di stato dell&#8217;applicazione, rendendo il flusso di dati pi\u00f9 prevedibile e semplice da debuggare.<\/p>\n<p>Inoltre, uno store in Pinia non si limita a contenere lo stato: le funzionalit\u00e0 incluse in Pinia permettono di aggiornare lo stato tramite azioni e di calcolare gli stati derivati tramite getter. Queste funzionalit\u00e0 integrate contribuiscono a rendere la base di codice pi\u00f9 efficiente e manutenibile.<\/p>\n<p>Il seguente esempio illustra la creazione di uno store Pinia di base nel file <strong>src\/store.js<\/strong> di un progetto.<\/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>Come accedere allo stato dello store nei componenti<\/h2>\n<p>Rispetto a Vuex, l&#8217;approccio di Pinia all&#8217;accesso e alla gestione dello stato \u00e8 pi\u00f9 intuitivo, soprattutto se si ha familiarit\u00e0 con l&#8217;API Composition di Vue 3. Questa API \u00e8 un insieme di funzioni che permettono di includere una logica reattiva e componibile. Questa API \u00e8 un insieme di funzioni che consentono di includere una logica reattiva e componibile nei nostri componenti.<\/p>\n<p>Consideriamo il seguente codice.<\/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>Nello snippet qui sopra, il tag <code>&lt;template&gt;<\/code> contiene il markup <a href=\"https:\/\/kinsta.com\/it\/blog\/html\/\">HTML<\/a> definito del nostro componente. Per visualizzare il valore della propriet\u00e0 <code>count<\/code> dallo store Pinia, utilizziamo la sintassi del data binding di Vue, espressa come <code>{{ count }}<\/code>.<\/p>\n<p>La funzione <code>useStore<\/code> fornisce l&#8217;accesso allo store Pinia, quindi la importiamo da <strong>store.js<\/strong> usando <code>import { useStore } from '.\/store';<\/code>.<\/p>\n<p>Una caratteristica dell&#8217;API Composition di Vue 3, la funzione <code>setup<\/code> definisce lo stato e la logica reattiva del nostro componente. All&#8217;interno della funzione, chiamiamo <code>useStore()<\/code> per accedere allo store Pinia.<\/p>\n<p>Successivamente, <code>const count = store.count<\/code> accede alla propriet\u00e0 <code>count<\/code> dello store, rendendola disponibile nel componente.<\/p>\n<p>Infine, <code>setup<\/code> restituisce la propriet\u00e0 <code>count<\/code>, consentendo al template di eseguire il rendering. Il sistema di reattivit\u00e0 di Vue significa che il template del nostro componente aggiorner\u00e0 il valore di <code>count<\/code> ogni volta che cambia nello store.<\/p>\n<p>Di seguito \u00e8 riportata una schermata dell&#8217;output.<\/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=\"Schermata del modello Pinia Store Demo caricato in un browser\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Schermata del modello Pinia Store Demo caricato in un browser.<\/figcaption><\/figure>\n<p>Questo esempio illustra i vantaggi di Pinia:<\/p>\n<ul>\n<li><strong>Semplicit\u00e0<\/strong>: Pinia permette di accedere direttamente allo stato dello store senza funzioni di mappatura. Al contrario, Vuex ha bisogno di <code>mapState<\/code> (o di aiutanti simili) per ottenere lo stesso accesso.<\/li>\n<li><strong>Accesso diretto allo store<\/strong>: Pinia permette di accedere direttamente alle propriet\u00e0 dello stato (come <code>store.count<\/code>), rendendo il nostro codice pi\u00f9 leggibile e comprensibile. Al contrario, Vuex spesso richiede dei getter per accedere anche alle propriet\u00e0 fondamentali, aggiungendo complessit\u00e0 che diminuisce la leggibilit\u00e0.<\/li>\n<li><strong>Compatibilit\u00e0 con le API di composizione<\/strong>: come dimostra il metodo di configurazione, l&#8217;integrazione di Pinia con le API di composizione si allinea particolarmente bene con lo sviluppo moderno di <a href=\"https:\/\/kinsta.com\/it\/blog\/librerie-componenti-vue\/\">Vue<\/a>, offrendo un&#8217;esperienza di codifica pi\u00f9 uniforme.<\/li>\n<\/ul>\n<h2>Come modificare lo stato con Pinia<\/h2>\n<p>In Pinia, possiamo modificare lo stato di uno store utilizzando le azioni, che sono pi\u00f9 flessibili delle mutazioni di Vuex. Consideriamo la seguente chiamata di funzione, che incrementa la propriet\u00e0 <code>count<\/code> dello stato:<\/p>\n<pre><code class=\"language-js\">store.increment(); \/\/ Increments the count<\/code><\/pre>\n<p>D&#8217;altra parte, l&#8217;equivalente di Vuex prevede la definizione di una mutazione oltre ad almeno un&#8217;azione:<\/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&#8217;azione di Pinia e il suo codice equivalente di Vuex esemplificano una differenza cruciale tra la complessit\u00e0 del codice delle due librerie. Esploriamo ulteriormente queste differenze:<\/p>\n<ul>\n<li><strong>Mutazione diretta o indiretta dello stato<\/strong>: come dimostra l&#8217;azione <code>increment<\/code>, le azioni di Pinia modificano direttamente lo stato dello store. In Vuex, invece, \u00e8 possibile cambiare lo stato solo utilizzando le mutazioni, che \u00e8 necessario <em>impegnare<\/em> con le azioni. Questa separazione dei processi garantisce la tracciabilit\u00e0 delle modifiche allo stato, ma \u00e8 pi\u00f9 complessa e rigida rispetto alle azioni Pinia.<\/li>\n<li><strong>Operazioni asincrone e sincrone<\/strong>: mentre le mutazioni di Vuex sono sempre sincrone e non possono contenere processi asincroni, le azioni di Pinia possono contenere codice sincrono <em>e<\/em> asincrono. Di conseguenza, possiamo eseguire chiamate API o altre operazioni asincrone direttamente all&#8217;interno delle azioni, rendendo la base di codice pi\u00f9 snella e concisa.<\/li>\n<li><strong>Sintassi semplificata<\/strong>: Vuex spesso richiede la definizione di mutazioni e la chiamata di azioni per eseguirle. Pinia elimina questa necessit\u00e0. La possibilit\u00e0 di mutare lo stato all&#8217;interno delle azioni riduce il codice boilerplate e rende pi\u00f9 semplice il codice esistente. In Vuex, gli aggiornamenti di base dello stato richiedono la definizione di un&#8217;azione e di una mutazione, anche se l&#8217;azione si limita a commettere la mutazione.<\/li>\n<\/ul>\n<h2>Il passaggio da Vuex a Pinia<\/h2>\n<p>Il passaggio a Pinia pu\u00f2 offrire numerosi vantaggi in termini di semplicit\u00e0, flessibilit\u00e0 e manutenibilit\u00e0, ma richiede un&#8217;attenta pianificazione e considerazione per garantire un&#8217;implementazione di successo.<\/p>\n<p>Prima di effettuare il passaggio, assicuratevi di:<\/p>\n<ol start=\"1\">\n<li>Familiarizzare con le differenze tra l&#8217;architettura di Pinia e Vuex, i modelli di gestione dello stato e le API. Comprendere queste differenze \u00e8 fondamentale per rifattorizzare efficacemente il codice e sfruttare appieno le funzionalit\u00e0 di Pinia.<\/li>\n<li>Analizzare e rifattorizzare lo stato, le azioni, le mutazioni e i getter di Vuex per adattarli alla struttura di Pinia. <strong>Ricordate che in Pinia definite lo stato come una funzione.<\/strong> Potete mutare direttamente gli stati con le azioni, oltre a implementare i getter in modo pi\u00f9 semplice.<\/li>\n<li>Pianificare la transizione dei moduli dello store Vuex. Pinia non utilizza i moduli come Vuex, ma \u00e8 comunque possibile strutturare gli store in modo che servano a scopi simili.<\/li>\n<li>Sfruttare il supporto migliorato di Pinia per TypeScript. Se il progetto utilizza <a href=\"https:\/\/kinsta.com\/it\/blog\/typescript\/\">TypeScript<\/a>, prendete in considerazione le funzionalit\u00e0 migliorate di Pinia per l&#8217;inferenza dei tipi e la tipizzazione per migliorare la sicurezza dei tipi e l&#8217;esperienza degli sviluppatori.<\/li>\n<li>Rivedere le strategie di testing per adattarle ai cambiamenti nella gestione degli stati. Questo processo potrebbe comportare l&#8217;aggiornamento delle modalit\u00e0 di simulazione di store o azioni nei test unitari e di integrazione.<\/li>\n<li>Considerare come la transizione influisce sulla struttura e sull&#8217;organizzazione del progetto. Tenete conto di fattori come le convenzioni di denominazione e il modo in cui importate e utilizzate gli store tra i vari componenti.<\/li>\n<li>Assicurare la compatibilit\u00e0 con le altre librerie. Controllate gli aggiornamenti necessari o le modifiche alle dipendenze che il passaggio potrebbe comportare.<\/li>\n<li>Valutare eventuali modifiche alle prestazioni. Pinia \u00e8 generalmente pi\u00f9 leggero di Vuex, ma continuate a monitorare le prestazioni dell&#8217;applicazione durante e dopo la transizione per assicurarvi che non ci siano problemi.<\/li>\n<\/ol>\n<p>La conversione di uno store da Vuex a Pinia comporta diversi passaggi per tenere conto delle differenze nelle strutture e nelle API. Consideriamo lo store Pinia di prima.<\/p>\n<p>Lo stesso store in un file <strong>store.js<\/strong> di Vuex appare come segue.<\/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>Come per il precedente store Pinia, questo esempio Vuex contiene un oggetto <code>state<\/code> con una singola propriet\u00e0 <code>count<\/code> inizializzata a <code>0<\/code>.<\/p>\n<p>L&#8217;oggetto <code>mutations<\/code> contiene metodi per mutare direttamente lo stato, mentre i metodi dell&#8217;oggetto <code>actions<\/code> impegnano la mutazione <code>increment<\/code>.<\/p>\n<p>Quindi, l&#8217;oggetto <code>getters<\/code> contiene il metodo <code>doubleCount<\/code>, che moltiplica lo stato <code>count<\/code> per <code>2<\/code> e restituisce il risultato.<\/p>\n<p>Come dimostra questo codice, l&#8217;implementazione di uno store in Pinia comporta diverse differenze evidenti rispetto a Vuex:<\/p>\n<ul>\n<li><strong>Inizializzazione<\/strong> &#8211; Pinia non richiede <code>Vue.use()<\/code>.<\/li>\n<li><strong>Struttura<\/strong> &#8211; In Pinia, lo stato \u00e8 una funzione che restituisce un oggetto, consentendo un migliore supporto di TypeScript e una maggiore reattivit\u00e0.<\/li>\n<li><strong>Azioni<\/strong> &#8211; Le azioni in Pinia sono metodi che modificano direttamente lo stato senza bisogno di mutazioni, semplificando il codice.<\/li>\n<li><strong>Getter<\/strong> &#8211; Sebbene siano simili a quelli di Vuex, i Getter di Pinia sono definiti all&#8217;interno della definizione dello store e possono accedere direttamente allo stato.<\/li>\n<\/ul>\n<h3>Come utilizzare lo store nei componenti<\/h3>\n<p>Con Vuex, potremmo utilizzare lo store in questo modo:<\/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>Per Pinia, l&#8217;utilizzo diventa:<\/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=\"Schermata della landing page del Pinia Store Demo con diversi incrementi: 0, 2 e 4.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Conversioni dello store Pinia.<\/figcaption><\/figure>\n<p>Questo esempio riguarda una conversione di base. Per store Vuex pi\u00f9 complessi, in particolare quelli che utilizzano moduli, la conversione comporter\u00e0 una ristrutturazione pi\u00f9 dettagliata per allinearsi all&#8217;architettura di Pinia.<\/p>\n<h2>Come distribuire un&#8217;applicazione Vue<\/h2>\n<p>Prima di procedere al deploy, create un account per accedere alla prova gratuita del <a href=\"https:\/\/sevalla.com\/application-hosting\/\">servizio di Hosting di Applicazioni di Kinsta<\/a>. L&#8217;applicazione verr\u00e0 distribuita <a href=\"https:\/\/docs.sevalla.com\/templates\/overviewnodejs-examples#node-js-application-with-a-dockerfile\">con l&#8217;aiuto di un file Docker<\/a>.<\/p>\n<p>Create un <strong>file Docker<\/strong> nella root del progetto e incollate i seguenti contenuti:<\/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>Questo codice istruisce il motore Docker di Kinsta a installare Node.js (<code>FROM node:latest<\/code>), a creare la directory di lavoro (<code>WORKDIR \/app<\/code>), a installare i moduli node dal file <strong>package.json<\/strong> (<code>RUN npm install<\/code>) e a impostare il <a href=\"https:\/\/docs.sevalla.com\/templates\/overviewnodejs-examples#start-command\">comando start (<code>CMD [\"npm\", \"run\", \"start\"]<\/code>)<\/a> che verr\u00e0 invocato all&#8217;avvio dell&#8217;applicazione <a href=\"https:\/\/kinsta.com\/it\/argomenti\/vue-js\/\">Vue<\/a>. I comandi <code>COPY<\/code> copiano i file o le directory specificate nella directory di lavoro.<\/p>\n<p>Dopodich\u00e9, inviate il codice al provider Git che preferite (<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> o <a href=\"https:\/\/docs.sevalla.com\/applications\/git\/gitlab#authorize-the-kinsta-gitlab-application\">GitLab<\/a>). Quando il repo sar\u00e0 pronto, seguite questi passaggi per distribuire l&#8217;applicazione su Kinsta:<\/p>\n<ol start=\"1\">\n<li>Accedete o create un account per visualizzare la dashboard <a href=\"https:\/\/my.kinsta.com\/?lang=it\" target=\"_blank\" rel=\"noopener noreferrer\">MyKinsta<\/a>.<\/li>\n<li>Autorizzate Kinsta con il provider Git.<\/li>\n<li>Selezionate <strong>Applicazione<\/strong> nella barra laterale di sinistra e cliccate sul pulsante <strong>Aggiungi applicazione<\/strong>.<\/li>\n<li>Nella finestra di dialogo che appare, scegliete il repository che volete distribuire. Se avete pi\u00f9 branch, potete selezionare il branch desiderato e dare un nome alla vostra applicazione.<\/li>\n<li>Selezionate uno dei data center disponibili.<\/li>\n<li>Scegliete l&#8217;ambiente di build e selezionate <strong>Usa il file Docker per impostare l&#8217;immagine del container<\/strong>.<\/li>\n<li>Se il Dockerfile non si trova nella root del repo, usate <strong>Context<\/strong> per indicare il suo percorso e cliccate su <strong>Continua<\/strong>.<\/li>\n<li>Potete lasciare vuota la voce <strong>Comando start<\/strong>. Kinsta utilizza <code>npm start<\/code> per avviare l&#8217;applicazione.<\/li>\n<li>Selezionate la dimensione del pod e il numero di istanze pi\u00f9 adatto all&#8217;applicazione e cliccate su <strong>Continua<\/strong>.<\/li>\n<li>Inserite i dati della carta di credito e cliccate su <strong>Crea applicazione<\/strong>.<\/li>\n<\/ol>\n<p>In alternativa all&#8217;Hosting di Applicazioni, potete scegliere di distribuire la vostra applicazione Vue come sito statico con l&#8217;<a href=\"https:\/\/sevalla.com\/static-site-hosting\/\">Hosting di Siti Statici<\/a> gratuito di Kinsta.<\/p>\n<h2>Riepilogo<\/h2>\n<p>Il passaggio da Vuex a Pinia segna un&#8217;evoluzione significativa nella gestione degli stati all&#8217;interno dell&#8217;ecosistema Vue. La semplicit\u00e0 di Pinia, il supporto migliorato di TypeScript e l&#8217;allineamento con l&#8217;API Composition di Vue 3 ne fanno una scelta convincente per le moderne applicazioni Vue.<\/p>\n<p>Quando sarete pronti a ospitare la vostra applicazione Vue con Kinsta, potete accedere a un&#8217;infrastruttura veloce, sicura e affidabile. <a href=\"https:\/\/kinsta.com\/it\/registrazione\/\">Create un account Kinsta<\/a> e utilizzate subito il nostro servizio di <a href=\"https:\/\/sevalla.com\/application-hosting\/\">Hosting di Applicazioni<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Il framework Vue per JavaScript \u00e8 diventato popolare per la creazione di interfacce utente e applicazioni a pagina singola (SPA). Per garantire che le applicazioni di &#8230;<\/p>\n","protected":false},"author":199,"featured_media":77021,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[25918,26160],"class_list":["post-77020","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-framework-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>La gestione dello stato in Vue.js con Pinia - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Impara tutto su Pinia, che offre agli sviluppatori un approccio di gestione pi\u00f9 leggero e intuitivo per gestire e accedere allo stato condiviso.\" \/>\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\/it\/blog\/vue-pinia\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"La gestione dello stato in Vue.js\" \/>\n<meta property=\"og:description\" content=\"Impara tutto su Pinia, che offre agli sviluppatori un approccio di gestione pi\u00f9 leggero e intuitivo per gestire e accedere allo stato condiviso.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/it\/blog\/vue-pinia\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstaitalia\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-13T11:09:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-18T08:10:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/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=\"Impara tutto su Pinia, che offre agli sviluppatori un approccio di gestione pi\u00f9 leggero e intuitivo per gestire e accedere allo stato condiviso.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/03\/master-state-management-in-vue-js-with-pinia.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@Kinsta_IT\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_IT\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jeremy Holcombe\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/vue-pinia\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/vue-pinia\/\"},\"author\":{\"name\":\"Jeremy Holcombe\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\"},\"headline\":\"La gestione dello stato in Vue.js\",\"datePublished\":\"2024-03-13T11:09:32+00:00\",\"dateModified\":\"2024-03-18T08:10:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/vue-pinia\/\"},\"wordCount\":2216,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/it\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/vue-pinia\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/03\/master-state-management-in-vue-js-with-pinia.jpg\",\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/vue-pinia\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/vue-pinia\/\",\"url\":\"https:\/\/kinsta.com\/it\/blog\/vue-pinia\/\",\"name\":\"La gestione dello stato in Vue.js con Pinia - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/vue-pinia\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/vue-pinia\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/03\/master-state-management-in-vue-js-with-pinia.jpg\",\"datePublished\":\"2024-03-13T11:09:32+00:00\",\"dateModified\":\"2024-03-18T08:10:47+00:00\",\"description\":\"Impara tutto su Pinia, che offre agli sviluppatori un approccio di gestione pi\u00f9 leggero e intuitivo per gestire e accedere allo stato condiviso.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/vue-pinia\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/vue-pinia\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/vue-pinia\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/03\/master-state-management-in-vue-js-with-pinia.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/03\/master-state-management-in-vue-js-with-pinia.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/vue-pinia\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/it\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Vue.js\",\"item\":\"https:\/\/kinsta.com\/it\/argomenti\/vue-js\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"La gestione dello stato in Vue.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/it\/#website\",\"url\":\"https:\/\/kinsta.com\/it\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluzioni di hosting premium, veloci e sicure\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/it\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/it\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/it\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/it\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstaitalia\/\",\"https:\/\/x.com\/Kinsta_IT\",\"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\/it\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\",\"name\":\"Jeremy Holcombe\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/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\/it\/blog\/author\/jeremyholcombe\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"La gestione dello stato in Vue.js con Pinia - Kinsta\u00ae","description":"Impara tutto su Pinia, che offre agli sviluppatori un approccio di gestione pi\u00f9 leggero e intuitivo per gestire e accedere allo stato condiviso.","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\/it\/blog\/vue-pinia\/","og_locale":"it_IT","og_type":"article","og_title":"La gestione dello stato in Vue.js","og_description":"Impara tutto su Pinia, che offre agli sviluppatori un approccio di gestione pi\u00f9 leggero e intuitivo per gestire e accedere allo stato condiviso.","og_url":"https:\/\/kinsta.com\/it\/blog\/vue-pinia\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstaitalia\/","article_published_time":"2024-03-13T11:09:32+00:00","article_modified_time":"2024-03-18T08:10:47+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/03\/master-state-management-in-vue-js-with-pinia.jpg","type":"image\/jpeg"}],"author":"Jeremy Holcombe","twitter_card":"summary_large_image","twitter_description":"Impara tutto su Pinia, che offre agli sviluppatori un approccio di gestione pi\u00f9 leggero e intuitivo per gestire e accedere allo stato condiviso.","twitter_image":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/03\/master-state-management-in-vue-js-with-pinia.jpg","twitter_creator":"@Kinsta_IT","twitter_site":"@Kinsta_IT","twitter_misc":{"Scritto da":"Jeremy Holcombe","Tempo di lettura stimato":"12 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/it\/blog\/vue-pinia\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/blog\/vue-pinia\/"},"author":{"name":"Jeremy Holcombe","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21"},"headline":"La gestione dello stato in Vue.js","datePublished":"2024-03-13T11:09:32+00:00","dateModified":"2024-03-18T08:10:47+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/vue-pinia\/"},"wordCount":2216,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/it\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/vue-pinia\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/03\/master-state-management-in-vue-js-with-pinia.jpg","inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/it\/blog\/vue-pinia\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/it\/blog\/vue-pinia\/","url":"https:\/\/kinsta.com\/it\/blog\/vue-pinia\/","name":"La gestione dello stato in Vue.js con Pinia - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/vue-pinia\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/vue-pinia\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/03\/master-state-management-in-vue-js-with-pinia.jpg","datePublished":"2024-03-13T11:09:32+00:00","dateModified":"2024-03-18T08:10:47+00:00","description":"Impara tutto su Pinia, che offre agli sviluppatori un approccio di gestione pi\u00f9 leggero e intuitivo per gestire e accedere allo stato condiviso.","breadcrumb":{"@id":"https:\/\/kinsta.com\/it\/blog\/vue-pinia\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/it\/blog\/vue-pinia\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/blog\/vue-pinia\/#primaryimage","url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/03\/master-state-management-in-vue-js-with-pinia.jpg","contentUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/03\/master-state-management-in-vue-js-with-pinia.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/it\/blog\/vue-pinia\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/it\/"},{"@type":"ListItem","position":2,"name":"Vue.js","item":"https:\/\/kinsta.com\/it\/argomenti\/vue-js\/"},{"@type":"ListItem","position":3,"name":"La gestione dello stato in Vue.js"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/it\/#website","url":"https:\/\/kinsta.com\/it\/","name":"Kinsta\u00ae","description":"Soluzioni di hosting premium, veloci e sicure","publisher":{"@id":"https:\/\/kinsta.com\/it\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/it\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/it\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/it\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstaitalia\/","https:\/\/x.com\/Kinsta_IT","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\/it\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21","name":"Jeremy Holcombe","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/#\/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\/it\/blog\/author\/jeremyholcombe\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/77020","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/users\/199"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/comments?post=77020"}],"version-history":[{"count":5,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/77020\/revisions"}],"predecessor-version":[{"id":77067,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/77020\/revisions\/77067"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/77020\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/77020\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/77020\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/77020\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/77020\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/77020\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/77020\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/77020\/translations\/es"},{"href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/77020\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media\/77021"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media?parent=77020"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/tags?post=77020"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/topic?post=77020"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}