{"id":74243,"date":"2024-04-03T12:09:01","date_gmt":"2024-04-03T10:09:01","guid":{"rendered":"https:\/\/kinsta.com\/es\/?p=74243&#038;preview=true&#038;preview_id=74243"},"modified":"2024-04-09T10:21:09","modified_gmt":"2024-04-09T08:21:09","slug":"vue-pinia","status":"publish","type":"post","link":"https:\/\/kinsta.com\/es\/blog\/vue-pinia\/","title":{"rendered":"Dominar la gesti\u00f3n de estados en Vue.js"},"content":{"rendered":"<p>El <a href=\"https:\/\/kinsta.com\/es\/secciones\/vue-js\/\">framework Vue para JavaScript<\/a> se ha hecho popular para construir interfaces de usuario y aplicaciones de una sola p\u00e1gina (SPA, single-page applications). Para garantizar que tus aplicaciones de gran tama\u00f1o funcionen de forma \u00f3ptima, necesitas conocer a fondo la gesti\u00f3n de estados, es decir, el proceso de gestionar y centralizar los datos reactivos (estado) de una aplicaci\u00f3n en varios componentes.<\/p>\n<p>En Vue, la gesti\u00f3n del estado se ha basado durante mucho tiempo en Vuex, una biblioteca con un store centralizado para todos los componentes de una aplicaci\u00f3n. Sin embargo, los recientes avances en el ecosistema Vue han dado lugar al sucesor de Vuex, Pinia.<\/p>\n<p>Pinia ofrece un enfoque de gesti\u00f3n m\u00e1s ligero, modular e intuitivo. Se integra a la perfecci\u00f3n con el sistema de reactividad y la API de Composici\u00f3n de Vue, facilitando a los desarrolladores la gesti\u00f3n y el acceso al estado compartido de forma escalable y mantenible.<\/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>Preparando el escenario: Pinia frente a Vuex<\/h2>\n<p>Como biblioteca de referencia para la gesti\u00f3n del estado en aplicaciones Vue, Vuex proporcionaba un store centralizado para todos los componentes de una aplicaci\u00f3n. Sin embargo, con el avance de Vue, Pinia representa una soluci\u00f3n m\u00e1s moderna. Exploremos en qu\u00e9 se diferencia de Vuex.<\/p>\n<ul>\n<li><strong>Diferencias en la API \u2014<\/strong> La API de Composici\u00f3n de Pinia ofrece una API m\u00e1s fundamental e intuitiva que Vuex, lo que facilita la gesti\u00f3n del estado de la aplicaci\u00f3n. Adem\u00e1s, su estructura se parece mucho a la API de Opciones de Vue, familiar para la mayor\u00eda de los desarrolladores de Vue.<\/li>\n<li><strong>Soporte de tipado<\/strong> \u2014\u00a0 Hist\u00f3ricamente, muchos desarrolladores de Vue han tenido problemas con el limitado soporte de tipos de Vuex. En cambio, Pinia es una biblioteca de gesti\u00f3n de estados totalmente tipada que elimina estas preocupaciones. Su seguridad de tipo ayuda a evitar posibles errores en tiempo de ejecuci\u00f3n, contribuye a la legibilidad del c\u00f3digo y facilita unas capacidades de escalado m\u00e1s fluidas.<\/li>\n<li><strong>Sistema de reactividad<\/strong> \u2014 Ambas bibliotecas aprovechan el sistema de reactividad de Vue, pero el enfoque de Pinia se ajusta m\u00e1s a la API de composici\u00f3n de Vue 3. Aunque la API de reactividad es potente, la gesti\u00f3n de estados complejos en aplicaciones grandes puede ser un reto. Afortunadamente, la arquitectura sencilla y flexible de Pinia facilita la gesti\u00f3n de estados en tus aplicaciones Vue 3. El patr\u00f3n de store de Pinia te permite definir un store para gestionar una parte espec\u00edfica del estado de la aplicaci\u00f3n, simplificando su organizaci\u00f3n y comparti\u00e9ndolo entre componentes.<\/li>\n<li><strong>Naturaleza ligera \u2014<\/strong>\u00a0Con s\u00f3lo 1 KB, Pinia se integra perfectamente en tu entorno de desarrollo, y su naturaleza ligera puede mejorar el rendimiento y los tiempos de carga de tu aplicaci\u00f3n.<\/li>\n<\/ul>\n<h2>C\u00f3mo configurar un proyecto Vue con Pinia<\/h2>\n<p>Para integrar Pinia en un proyecto Vue, inicializa tu proyecto con Vue CLI o Vite. Tras la inicializaci\u00f3n del proyecto, puedes instalar Pinia mediante npm o yarn como dependencia.<\/p>\n<ol start=\"1\">\n<li>Crea un nuevo proyecto Vue utilizando Vue CLI o Vite. A continuaci\u00f3n, sigue las indicaciones para configurar tu proyecto.\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>Cambia tu directorio a la carpeta del proyecto reci\u00e9n creado:\n<pre><code class=\"language-bash\">cd my-vue-app<\/code><\/pre>\n<\/li>\n<li>Instala Pinia como dependencia en tu proyecto.\n<pre><code class=\"language-bash\">\/\/ Using npm\nnpm install pinia\n\/\/ Using yarn\nyarn add pinia<\/code><\/pre>\n<\/li>\n<li>En tu archivo de entrada principal (normalmente <strong>main.js<\/strong> o <strong>main.ts<\/strong>), importa Pinia y dile a Vue que lo utilice:\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>Con Pinia instalado y configurado en tu proyecto Vue, est\u00e1s listo para definir y utilizar stores para la gesti\u00f3n de estados.<\/li>\n<\/ol>\n<h2>C\u00f3mo crear un store en Pinia<\/h2>\n<p>El store es la columna vertebral de la gesti\u00f3n de estados en tu aplicaci\u00f3n Vue potenciada con Pinia. Te ayuda a gestionar los datos de toda la aplicaci\u00f3n de forma cohesionada y coordinada. El store es el lugar donde defines, guardas y gestionas los datos que compartir\u00e1n los distintos componentes de tu aplicaci\u00f3n.<\/p>\n<p>Esta centralizaci\u00f3n es fundamental, ya que estructura y organiza los cambios de estado de tu aplicaci\u00f3n, haciendo que el flujo de datos sea m\u00e1s predecible y f\u00e1cil de depurar.<\/p>\n<p>Adem\u00e1s, un store en Pinia hace algo m\u00e1s que guardar el estado: Las funcionalidades incluidas en Pinia te permiten actualizar el estado mediante acciones y calcular estados derivados mediante getters. Estas funciones integradas contribuyen a un c\u00f3digo base m\u00e1s eficiente y f\u00e1cil de mantener.<\/p>\n<p>El siguiente ejemplo ilustra la creaci\u00f3n de un store b\u00e1sido de Pinia en el archivo <strong>src\/store.js<\/strong> de un proyecto.<\/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>C\u00f3mo acceder al estado del store en los componentes<\/h2>\n<p>En comparaci\u00f3n con Vuex, el enfoque de Pinia respecto al acceso y la gesti\u00f3n del estado es m\u00e1s intuitivo, especialmente si est\u00e1s familiarizado con la API de composici\u00f3n de Vue 3. Esta API es un conjunto de varias que permiten incluir l\u00f3gica reactiva y componible en tus componentes.<\/p>\n<p>Considera el siguiente c\u00f3digo.<\/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>En el fragmento anterior, la etiqueta <code>&lt;template&gt;<\/code> contiene el marcado <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-el-html\/\">HTML<\/a> definido de tu componente. Para mostrar el valor de la propiedad <code>count<\/code> del store Pinia, utilizas la sintaxis de enlace de datos de Vue, expresada como <code>{{ count }}<\/code>.<\/p>\n<p>La funci\u00f3n <code>useStore<\/code> proporciona acceso al store Pinia, por lo que puedes importarla desde <strong>store.js<\/strong> utilizando <code>import { useStore } from '.\/store';<\/code>.<\/p>\n<p>Una caracter\u00edstica de la API de composici\u00f3n de Vue 3, la funci\u00f3n <code>setup<\/code> define el estado reactivo y la l\u00f3gica de tu componente. Dentro de la funci\u00f3n, llamas a <code>useStore()<\/code> para acceder al store Pinia.<\/p>\n<p>A continuaci\u00f3n, <code>const count = store.count<\/code> accede a la propiedad <code>count<\/code> del store, haci\u00e9ndola disponible en el componente.<\/p>\n<p>Por \u00faltimo, <code>setup<\/code> devuelve el <code>count<\/code>, permitiendo que la plantilla lo renderice. El sistema de reactividad de Vue significa que la plantilla de tu componente actualizar\u00e1 el valor de <code>count<\/code> siempre que cambie en el store.<\/p>\n<p>A continuaci\u00f3n se muestra una captura de pantalla de la salida.<\/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=\"Captura de pantalla de la p\u00e1gina de inicio de la aplicaci\u00f3n de demostraci\u00f3n de Pinia Store\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Captura de pantalla de la plantilla Pinia Store Demo cargada en un navegador.<\/figcaption><\/figure>\n<p>Este ejemplo ilustra las ventajas de Pinia:<\/p>\n<ul>\n<li><strong>Simplicidad<\/strong> \u2014 Pinia permite acceder directamente al estado del store sin funciones de mapeo. En cambio, Vuex necesita <code>mapState<\/code> (o ayudantes similares) para lograr el mismo acceso.<\/li>\n<li><strong>Acceso directo al store<\/strong> \u2014 Pinia te permite acceder directamente a las propiedades de estado (como <code>store.count<\/code>), lo que hace que tu c\u00f3digo sea m\u00e1s legible y comprensible. Mientras tanto, Vuex a menudo requiere getters para acceder incluso a propiedades fundamentales, a\u00f1adiendo complejidad que disminuye la legibilidad.<\/li>\n<li><strong>Compatibilidad con la API de Composici\u00f3n<\/strong> \u2014 Como demuestra el m\u00e9todo de configuraci\u00f3n, la integraci\u00f3n de Pinia con la API de Composici\u00f3n se alinea especialmente bien con el desarrollo moderno de <a href=\"https:\/\/kinsta.com\/es\/blog\/bibliotecas-de-componentes-vue\/\">Vue<\/a>, proporcionando una experiencia de programaci\u00f3n m\u00e1s uniforme.<\/li>\n<\/ul>\n<h2>C\u00f3mo modificar el estado con Pinia<\/h2>\n<p>En Pinia, puedes modificar el estado de un store mediante acciones, que son m\u00e1s flexibles que las mutaciones de Vuex. Considera la siguiente llamada a una funci\u00f3n, que incrementa la propiedad <code>count<\/code> del estado:<\/p>\n<pre><code class=\"language-js\">store.increment(); \/\/ Increments the count<\/code><\/pre>\n<p>Por otro lado, un equivalente en Vuex implica definir una mutaci\u00f3n adem\u00e1s de al menos una acci\u00f3n:<\/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>La acci\u00f3n Pinia y su c\u00f3digo equivalente Vuex ejemplifican una diferencia crucial entre la complejidad del c\u00f3digo de las bibliotecas. Exploremos m\u00e1s a fondo estas diferencias:<\/p>\n<ul>\n<li><strong>Mutaci\u00f3n de estado directa frente a indirecta<\/strong> \u2014 Como demuestra la acci\u00f3n <code>increment<\/code>, las acciones Pinia mutan directamente el estado del store. En Vuex, s\u00f3lo puedes cambiar el estado mediante mutaciones, que tienes que hacer <em>commit<\/em> con las acciones. Esta separaci\u00f3n de procesos garantiza que tus cambios de estado sean rastreables, pero es m\u00e1s compleja y r\u00edgida que las acciones en Pinia.<\/li>\n<li><strong>Operaciones as\u00edncronas frente a s\u00edncronas<\/strong> \u2014 Mientras que las mutaciones Vuex son siempre s\u00edncronas y no pueden contener procesos as\u00edncronos, las acciones Pinia pueden contener c\u00f3digo s\u00edncrono <em>y<\/em> as\u00edncrono. Como resultado, puedes realizar llamadas a la API u otras operaciones as\u00edncronas directamente dentro de las acciones, lo que hace que el c\u00f3digo base sea m\u00e1s \u00e1gil y conciso.<\/li>\n<li><strong>Sintaxis simplificada<\/strong> \u2014 Vuex a menudo requiere definir mutaciones y llamar a acciones para realizarlas. Pinia elimina esta necesidad. La posibilidad de mutar el estado dentro de las acciones reduce el c\u00f3digo repetitivo y hace que el c\u00f3digo existente sea m\u00e1s sencillo. En Vuex, las actualizaciones b\u00e1sicas de estado requieren definir una acci\u00f3n y una mutaci\u00f3n, incluso si la acci\u00f3n se limita a hacer commit de la mutaci\u00f3n.<\/li>\n<\/ul>\n<h2>La transici\u00f3n de Vuex a Pinia<\/h2>\n<p>La transici\u00f3n a Pinia puede proporcionar numerosas ventajas en cuanto a simplicidad, flexibilidad y facilidad de mantenimiento, pero requiere una planificaci\u00f3n y consideraci\u00f3n cuidadosas para garantizar una implementaci\u00f3n satisfactoria.<\/p>\n<p>Antes de hacer el cambio, aseg\u00farate de:<\/p>\n<ol start=\"1\">\n<li>Familiarizarte con las diferencias entre la arquitectura, los patrones de gesti\u00f3n de estados y las API de Pinia y Vuex. Comprender estas diferencias es crucial para refactorizar eficazmente tu c\u00f3digo y aprovechar al m\u00e1ximo las caracter\u00edsticas de Pinia.<\/li>\n<li>Analizar y refactorizar tu estado, acciones, mutaciones y getters de Vuex para que encajen en la estructura de Pinia. <strong>Recuerda que en Pinia defines el estado como una funci\u00f3n.<\/strong> Puedes mutar estados directamente con acciones y puedes implementar getters m\u00e1s f\u00e1cilmente.<\/li>\n<li>Planificar c\u00f3mo realizar la transici\u00f3n de los m\u00f3dulos de tu store Vuex. Pinia no utiliza m\u00f3dulos del mismo modo que Vuex, pero a\u00fan as\u00ed puedes estructurar tus stores para que sirvan a prop\u00f3sitos similares.<\/li>\n<li>Aprovecha la compatibilidad mejorada de Pinia con TypeScript. Si tu proyecto utiliza <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-typescript\/\">TypeScript<\/a>, considera las capacidades mejoradas de inferencia de tipos y tipado de Pinia para mejorar la seguridad de tipos y la experiencia del desarrollador.<\/li>\n<li>Revisa tus estrategias de pruebas para adaptarlas a los cambios en la gesti\u00f3n de estados. Este proceso podr\u00eda implicar la actualizaci\u00f3n de c\u00f3mo simulas stores o acciones en tus pruebas unitarias y de integraci\u00f3n.<\/li>\n<li>Considera c\u00f3mo afecta la transici\u00f3n a la estructura y organizaci\u00f3n de tu proyecto. Ten en cuenta factores como las convenciones de nomenclatura y c\u00f3mo importas y utilizas los stores en los distintos componentes.<\/li>\n<li>Aseg\u00farate de la compatibilidad con otras bibliotecas. Comprueba si hay actualizaciones necesarias o cambios en las dependencias a los que pueda afectar el cambio.<\/li>\n<li>Eval\u00faa cualquier cambio en el rendimiento. Pinia suele ser m\u00e1s ligero que Vuex, pero sigue supervisando el rendimiento de tu aplicaci\u00f3n durante y despu\u00e9s de la transici\u00f3n para asegurarte de que no haya problemas.<\/li>\n<\/ol>\n<p>Convertir un store de Vuex a Pinia implica varios pasos para adaptarse a las diferencias en sus estructuras y API. Considera el store de Pinia anterior.<\/p>\n<p>El mismo store en un archivo <strong>store.js<\/strong> de Vuex tiene el siguiente aspecto.<\/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>Al igual que el store Pinia anterior, este ejemplo Vuex contiene un objeto <code>state<\/code> con una \u00fanica propiedad <code>count<\/code> inicializada a <code>0<\/code>.<\/p>\n<p>El objeto <code>mutations<\/code> contiene m\u00e9todos para mutar directamente el estado, mientras que los m\u00e9todos del objeto <code>actions<\/code> consignan la mutaci\u00f3n <code>increment<\/code>.<\/p>\n<p>A continuaci\u00f3n, el objeto <code>getters<\/code> contiene el m\u00e9todo <code>doubleCount<\/code>, que multiplica el estado <code>count<\/code> por <code>2<\/code> y devuelve el resultado.<\/p>\n<p>Como demuestra este c\u00f3digo, implementar un store en Pinia implica varias diferencias notables con Vuex:<\/p>\n<ul>\n<li><strong>Inicializaci\u00f3n<\/strong> \u2014 Pinia no requiere <code>Vue.use()<\/code>.<\/li>\n<li><strong>Estructura<\/strong> \u2014 En Pinia, el estado es una funci\u00f3n que devuelve un objeto, lo que permite una mejor compatibilidad con TypeScript y reactividad.<\/li>\n<li><strong>Acciones<\/strong> \u2014 Las acciones en Pinia son m\u00e9todos que mutan directamente el estado sin necesidad de mutaciones, simplificando el c\u00f3digo.<\/li>\n<li><strong>Getters<\/strong> \u2014 Aunque similares a Vuex, los Getters en Pinia se definen dentro de la definici\u00f3n del store y pueden acceder directamente al estado.<\/li>\n<\/ul>\n<h3>C\u00f3mo utilizar el store en los componentes<\/h3>\n<p>Con Vuex, podr\u00edas utilizar el store de la siguiente manera:<\/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>Para Pinia, el uso se convierte en:<\/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=\"Captura de pantalla de la p\u00e1gina de aterrizaje de la Demo del Store de Pinia en diferentes incrementos: 0, 2 y 4.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Conversiones de store Pinia.<\/figcaption><\/figure>\n<p>Este ejemplo incluye una conversi\u00f3n b\u00e1sica. Para stores Vuex m\u00e1s complejos, especialmente los que utilizan m\u00f3dulos, la conversi\u00f3n implicar\u00eda una reestructuraci\u00f3n m\u00e1s detallada para alinearse con la arquitectura de Pinia.<\/p>\n<h2>C\u00f3mo desplegar tu aplicaci\u00f3n Vue<\/h2>\n<p>Antes de desplegar, reg\u00edstrate para una prueba gratuita del <a href=\"https:\/\/sevalla.com\/application-hosting\/\">servicio de Alojamiento de Aplicaciones de Kinsta<\/a>. Desplegar\u00e1s la aplicaci\u00f3n <a href=\"https:\/\/docs.sevalla.com\/templates\/overviewnodejs-examples#node-js-application-with-a-dockerfile\">con la ayuda de un archivo Dockerfile<\/a>.<\/p>\n<p>Crea un <strong>Dockerfile<\/strong> en la ra\u00edz de tu proyecto y pega el siguiente contenido:<\/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>Este c\u00f3digo indica al motor Docker de Kinsta que instale Node.js (<code>FROM node:latest<\/code>), cree el directorio de trabajo (<code>WORKDIR \/app<\/code>), instale los m\u00f3dulos node desde el archivo <strong>package.json<\/strong> (<code>RUN npm install<\/code>) y establezca el comando <a href=\"https:\/\/docs.sevalla.com\/templates\/overviewnodejs-examples#start-command\">start (<code>CMD [\"npm\", \"run\", \"start\"]<\/code>)<\/a> que se invocar\u00e1 cuando se inicie la aplicaci\u00f3n <a href=\"https:\/\/kinsta.com\/es\/secciones\/vue-js\/\">Vue<\/a>. Los comandos <code>COPY<\/code> copian los archivos o directorios especificados al directorio de trabajo.<\/p>\n<p>Despu\u00e9s de eso, env\u00eda tu c\u00f3digo a tu proveedor Git preferido (<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>). Una vez que tu repositorio est\u00e9 listo, sigue estos pasos para desplegar tu aplicaci\u00f3n en Kinsta:<\/p>\n<ol start=\"1\">\n<li>Inicia sesi\u00f3n o crea una cuenta para ver tu panel <a href=\"https:\/\/my.kinsta.com\/?lang=es\" target=\"_blank\" rel=\"noopener noreferrer\">MyKinsta<\/a>.<\/li>\n<li>Autoriza a Kinsta con tu proveedor de Git.<\/li>\n<li>Selecciona <strong>Aplicaci\u00f3n<\/strong> en la barra lateral izquierda y haz clic en el bot\u00f3n <strong>A\u00f1adir Aplicaci\u00f3n<\/strong>.<\/li>\n<li>En el modal que aparece, elige el repositorio que quieres desplegar. Si tienes varias ramas, puedes seleccionar la rama deseada y dar un nombre a tu aplicaci\u00f3n.<\/li>\n<li>Selecciona una de las ubicaciones de centros de datos disponibles.<\/li>\n<li>Elige tu entorno de construcci\u00f3n y selecciona <strong>Utilizar Dockerfile para configurar la imagen del contenedor<\/strong>.<\/li>\n<li>Si tu Dockerfile no est\u00e1 en la ra\u00edz de tu repositorio, utiliza <strong>Context<\/strong>\u00a0para indicar su ruta y haz clic en <strong>Continuar<\/strong>.<\/li>\n<li>Puedes dejar vac\u00eda la entrada <strong>Comando de inicio<\/strong>. Kinsta utiliza <code>npm start<\/code> para iniciar tu aplicaci\u00f3n.<\/li>\n<li>Selecciona el tama\u00f1o del pod y el n\u00famero de instancias m\u00e1s adecuados para tu aplicaci\u00f3n y haz clic en <strong>Continuar<\/strong>.<\/li>\n<li>Rellena los datos de tu tarjeta de cr\u00e9dito y haz clic en <strong>Crear aplicaci\u00f3n<\/strong>.<\/li>\n<\/ol>\n<p>Como alternativa al alojamiento de aplicaciones, puedes optar por desplegar tu aplicaci\u00f3n Vue como un sitio est\u00e1tico con el <a href=\"https:\/\/sevalla.com\/static-site-hosting\/\">alojamiento de sitios est\u00e1ticos<\/a> de Kinsta de forma gratuita.<\/p>\n<h2>Resumen<\/h2>\n<p>La transici\u00f3n de Vuex a Pinia marca una evoluci\u00f3n significativa en la gesti\u00f3n de estados dentro del ecosistema Vue. La simplicidad de Pinia, su compatibilidad mejorada con TypeScript y su alineaci\u00f3n con la API de composici\u00f3n de Vue 3 la convierten en una opci\u00f3n convincente para las aplicaciones Vue modernas.<\/p>\n<p>Cuando est\u00e9s listo para alojar tu aplicaci\u00f3n Vue con Kinsta, podr\u00e1s acceder a una infraestructura r\u00e1pida, segura y fiable. <a href=\"https:\/\/kinsta.com\/es\/suscripcion\/\">Reg\u00edstrate en Kinsta<\/a> y utiliza nuestro servicio de <a href=\"https:\/\/sevalla.com\/application-hosting\/\">alojamiento de aplicaciones<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>El framework Vue para JavaScript se ha hecho popular para construir interfaces de usuario y aplicaciones de una sola p\u00e1gina (SPA, single-page applications). Para garantizar que &#8230;<\/p>\n","protected":false},"author":199,"featured_media":74244,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1296,1333],"class_list":["post-74243","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-frameworks-javascript","topic-vue-js"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Domina la gesti\u00f3n de estados en Vue.js con Pinia - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Conoce Pinia, c\u00f3mo ofrece un enfoque de gesti\u00f3n m\u00e1s ligero e intuitivo para que los desarrolladores gestionen y accedan al estado compartido.\" \/>\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\/es\/blog\/vue-pinia\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Dominar la gesti\u00f3n de estados en Vue.js\" \/>\n<meta property=\"og:description\" content=\"Conoce Pinia, c\u00f3mo ofrece un enfoque de gesti\u00f3n m\u00e1s ligero e intuitivo para que los desarrolladores gestionen y accedan al estado compartido.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/es\/blog\/vue-pinia\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinsta.es\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-04-03T10:09:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-09T08:21:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/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=\"Conoce Pinia, c\u00f3mo ofrece un enfoque de gesti\u00f3n m\u00e1s ligero e intuitivo para que los desarrolladores gestionen y accedan al estado compartido.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/03\/master-state-management-in-vue-js-with-pinia-1-1024x512.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@Kinsta_ES\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_ES\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jeremy Holcombe\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/vue-pinia\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/vue-pinia\/\"},\"author\":{\"name\":\"Jeremy Holcombe\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\"},\"headline\":\"Dominar la gesti\u00f3n de estados en Vue.js\",\"datePublished\":\"2024-04-03T10:09:01+00:00\",\"dateModified\":\"2024-04-09T08:21:09+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/vue-pinia\/\"},\"wordCount\":2481,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/vue-pinia\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/03\/master-state-management-in-vue-js-with-pinia.jpg\",\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/vue-pinia\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/vue-pinia\/\",\"url\":\"https:\/\/kinsta.com\/es\/blog\/vue-pinia\/\",\"name\":\"Domina la gesti\u00f3n de estados en Vue.js con Pinia - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/vue-pinia\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/vue-pinia\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/03\/master-state-management-in-vue-js-with-pinia.jpg\",\"datePublished\":\"2024-04-03T10:09:01+00:00\",\"dateModified\":\"2024-04-09T08:21:09+00:00\",\"description\":\"Conoce Pinia, c\u00f3mo ofrece un enfoque de gesti\u00f3n m\u00e1s ligero e intuitivo para que los desarrolladores gestionen y accedan al estado compartido.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/vue-pinia\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/vue-pinia\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/vue-pinia\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/03\/master-state-management-in-vue-js-with-pinia.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/03\/master-state-management-in-vue-js-with-pinia.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/vue-pinia\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Frameworks JavaScript\",\"item\":\"https:\/\/kinsta.com\/es\/secciones\/frameworks-javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Dominar la gesti\u00f3n de estados en Vue.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/es\/#website\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluciones de alojamiento premium, r\u00e1pidas y seguras\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/es\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinsta.es\/\",\"https:\/\/x.com\/Kinsta_ES\",\"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\/es\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\",\"name\":\"Jeremy Holcombe\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/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\/es\/blog\/author\/jeremyholcombe\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Domina la gesti\u00f3n de estados en Vue.js con Pinia - Kinsta\u00ae","description":"Conoce Pinia, c\u00f3mo ofrece un enfoque de gesti\u00f3n m\u00e1s ligero e intuitivo para que los desarrolladores gestionen y accedan al estado compartido.","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\/es\/blog\/vue-pinia\/","og_locale":"es_ES","og_type":"article","og_title":"Dominar la gesti\u00f3n de estados en Vue.js","og_description":"Conoce Pinia, c\u00f3mo ofrece un enfoque de gesti\u00f3n m\u00e1s ligero e intuitivo para que los desarrolladores gestionen y accedan al estado compartido.","og_url":"https:\/\/kinsta.com\/es\/blog\/vue-pinia\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinsta.es\/","article_published_time":"2024-04-03T10:09:01+00:00","article_modified_time":"2024-04-09T08:21:09+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/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":"Conoce Pinia, c\u00f3mo ofrece un enfoque de gesti\u00f3n m\u00e1s ligero e intuitivo para que los desarrolladores gestionen y accedan al estado compartido.","twitter_image":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/03\/master-state-management-in-vue-js-with-pinia-1-1024x512.jpg","twitter_creator":"@Kinsta_ES","twitter_site":"@Kinsta_ES","twitter_misc":{"Escrito por":"Jeremy Holcombe","Tiempo de lectura":"12 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/es\/blog\/vue-pinia\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/blog\/vue-pinia\/"},"author":{"name":"Jeremy Holcombe","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21"},"headline":"Dominar la gesti\u00f3n de estados en Vue.js","datePublished":"2024-04-03T10:09:01+00:00","dateModified":"2024-04-09T08:21:09+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/vue-pinia\/"},"wordCount":2481,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/vue-pinia\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/03\/master-state-management-in-vue-js-with-pinia.jpg","inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/es\/blog\/vue-pinia\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/es\/blog\/vue-pinia\/","url":"https:\/\/kinsta.com\/es\/blog\/vue-pinia\/","name":"Domina la gesti\u00f3n de estados en Vue.js con Pinia - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/vue-pinia\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/vue-pinia\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/03\/master-state-management-in-vue-js-with-pinia.jpg","datePublished":"2024-04-03T10:09:01+00:00","dateModified":"2024-04-09T08:21:09+00:00","description":"Conoce Pinia, c\u00f3mo ofrece un enfoque de gesti\u00f3n m\u00e1s ligero e intuitivo para que los desarrolladores gestionen y accedan al estado compartido.","breadcrumb":{"@id":"https:\/\/kinsta.com\/es\/blog\/vue-pinia\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/es\/blog\/vue-pinia\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/blog\/vue-pinia\/#primaryimage","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/03\/master-state-management-in-vue-js-with-pinia.jpg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/03\/master-state-management-in-vue-js-with-pinia.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/es\/blog\/vue-pinia\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/es\/"},{"@type":"ListItem","position":2,"name":"Frameworks JavaScript","item":"https:\/\/kinsta.com\/es\/secciones\/frameworks-javascript\/"},{"@type":"ListItem","position":3,"name":"Dominar la gesti\u00f3n de estados en Vue.js"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/es\/#website","url":"https:\/\/kinsta.com\/es\/","name":"Kinsta\u00ae","description":"Soluciones de alojamiento premium, r\u00e1pidas y seguras","publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/es\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinsta.es\/","https:\/\/x.com\/Kinsta_ES","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\/es\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21","name":"Jeremy Holcombe","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/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\/es\/blog\/author\/jeremyholcombe\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/74243","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/users\/199"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/comments?post=74243"}],"version-history":[{"count":7,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/74243\/revisions"}],"predecessor-version":[{"id":74505,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/74243\/revisions\/74505"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/74243\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/74243\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/74243\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/74243\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/74243\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/74243\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/74243\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/74243\/translations\/es"},{"href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/74243\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media\/74244"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media?parent=74243"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/tags?post=74243"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/topic?post=74243"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}