{"id":67656,"date":"2024-03-13T08:10:16","date_gmt":"2024-03-13T11:10:16","guid":{"rendered":"https:\/\/kinsta.com\/pt\/?p=67656&#038;preview=true&#038;preview_id=67656"},"modified":"2024-03-27T06:51:21","modified_gmt":"2024-03-27T09:51:21","slug":"vue-pinia","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/vue-pinia\/","title":{"rendered":"Domine o Gerenciamento de Estado no Vue.js"},"content":{"rendered":"<p>O <a href=\"https:\/\/kinsta.com\/pt\/topicos\/vue-js\/\">framework Vue para JavaScript<\/a> tornou-se popular para a cria\u00e7\u00e3o de interfaces de usu\u00e1rio e aplicativos de p\u00e1gina \u00fanica (SPAs). Para garantir que seus aplicativos de grande porte funcionem de forma ideal, voc\u00ea precisa ter um bom dom\u00ednio do gerenciamento de estado \u2014 o processo de gerenciar e centralizar os dados reativos de um aplicativo (estado) em v\u00e1rios componentes.<\/p>\n<p>No Vue, o gerenciamento de estado h\u00e1 muito tempo depende do Vuex, uma biblioteca com armazenamento centralizado para todos os componentes de um aplicativo. No entanto, avan\u00e7os recentes no ecossistema Vue deram origem ao sucessor do Vuex, o Pinia.<\/p>\n<p>O Pinia oferece uma abordagem de gerenciamento mais leve, modular e intuitiva. Ele se integra perfeitamente ao sistema de reatividade e \u00e0 API de Composi\u00e7\u00e3o do Vue, tornando f\u00e1cil para os desenvolvedores gerenciar e acessar o estado compartilhado de forma escalon\u00e1vel e sustent\u00e1vel.<\/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>Definindo o cen\u00e1rio: Pinia vs Vuex<\/h2>\n<p>Como biblioteca de refer\u00eancia para gerenciamento de estado em aplicativos Vue, o Vuex fornecia uma store centralizada para todos os componentes de um aplicativo. No entanto, com o avan\u00e7o do Vue, o Pinia representa uma solu\u00e7\u00e3o mais moderna. Vamos explorar como ele se diferencia do Vuex.<\/p>\n<ul>\n<li><strong>Diferen\u00e7as de API \u2014<\/strong> A API de Composi\u00e7\u00e3o do Pinia oferece uma API mais fundamental e intuitiva que o Vuex, tornando mais simples gerenciar o estado do aplicativo. Al\u00e9m disso, sua estrutura se assemelha bastante \u00e0 API de Op\u00e7\u00f5es do Vue, familiar para a maioria dos desenvolvedores de Vue.<\/li>\n<li><strong>Suporte a tipos \u2014<\/strong> Historicamente, muitos desenvolvedores de Vue t\u00eam tido dificuldades com o suporte limitado a tipos do Vuex. Em contrapartida, o Pinia \u00e9 uma biblioteca de gerenciamento de estado totalmente tipada que elimina essas preocupa\u00e7\u00f5es. Sua seguran\u00e7a de tipos ajuda a evitar poss\u00edveis erros de runtime, contribui para a legibilidade do c\u00f3digo e possibilita um escalonamento mais suave.<\/li>\n<li><strong>Sistema de reatividade \u2014<\/strong> Ambas as bibliotecas aproveitam o sistema de reatividade do Vue, mas a abordagem do Pinia se alinha melhor com a API de Composi\u00e7\u00e3o do Vue 3. Embora a API de reatividade seja poderosa, o gerenciamento de estados complexos em grandes aplicativos pode ser um desafio. Felizmente, a arquitetura simples e flex\u00edvel do Pinia diminui a complexidade de gerenciamento de estado em seus aplicativos Vue 3. O padr\u00e3o de store do Pinia permite que voc\u00ea defina uma store para gerenciar uma parte espec\u00edfica do estado do aplicativo, simplificando sua organiza\u00e7\u00e3o e compartilhando-a entre componentes.<\/li>\n<li><strong>Natureza leve \u2014<\/strong>\u00a0Com apenas 1 KB, o Pinia se integra perfeitamente ao seu ambiente de desenvolvimento, e sua natureza leve pode melhorar o desempenho e os tempos de carregamento do aplicativo.<\/li>\n<\/ul>\n<h2>Como configurar um projeto Vue com o Pinia<\/h2>\n<p>Para integrar o Pinia em um projeto Vue, inicialize seu projeto com o Vue CLI ou o Vite. Ap\u00f3s a inicializa\u00e7\u00e3o do projeto, voc\u00ea pode instalar o Pinia via npm ou yarn como uma depend\u00eancia.<\/p>\n<ol start=\"1\">\n<li>Crie um novo projeto Vue usando o Vue CLI ou o Vite. Ent\u00e3o siga as instru\u00e7\u00f5es para configurar seu projeto.\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>Altere seu diret\u00f3rio para a pasta do projeto rec\u00e9m-criado:\n<pre><code class=\"language-bash\">cd my-vue-app<\/code><\/pre>\n<\/li>\n<li>Instale o Pinia como uma depend\u00eancia em seu projeto.\n<pre><code class=\"language-bash\">\/\/ Using npm\nnpm install pinia\n\/\/ Using yarn\nyarn add pinia<\/code><\/pre>\n<\/li>\n<li>Em seu arquivo de entrada principal (geralmente <strong>main.js<\/strong> ou <strong>main.ts<\/strong>), importe o Pinia e diga ao Vue para us\u00e1-lo:\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>Com o Pinia instalado e configurado em seu projeto Vue, voc\u00ea est\u00e1 pronto para definir e usar stores para gerenciamento de estado.<\/li>\n<\/ol>\n<h2>Como criar uma store no Pinia<\/h2>\n<p>A store \u00e9 a espinha dorsal do gerenciamento de estado em seu aplicativo Vue com Pinia. Ela o ajuda a gerenciar os dados de todo o aplicativo de forma coesa e coordenada. \u00c9 na store que voc\u00ea define, armazena e gerencia os dados a serem compartilhados entre os v\u00e1rios componentes do seu aplicativo.<\/p>\n<p>Essa centraliza\u00e7\u00e3o \u00e9 fundamental, pois define a estrutura e organiza as altera\u00e7\u00f5es de estado do seu aplicativo, tornando o fluxo de dados mais previs\u00edvel e f\u00e1cil de depurar.<\/p>\n<p>Al\u00e9m disso, uma store no Pinia faz mais do que manter o estado. As funcionalidades inclu\u00eddas no Pinia permitem atualizar o estado por meio de a\u00e7\u00f5es e calcular estados derivados usando getters. Esses recursos incorporados contribuem para uma base de c\u00f3digo mais eficiente e de f\u00e1cil manuten\u00e7\u00e3o.<\/p>\n<p>O exemplo a seguir ilustra a cria\u00e7\u00e3o de uma store b\u00e1sica do Pinia em um arquivo <strong>src\/store.js<\/strong> do projeto.<\/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>Como acessar o estado da store nos componentes<\/h2>\n<p>Em compara\u00e7\u00e3o com o Vuex, a abordagem do Pinia para acesso e gerenciamento de estado \u00e9 mais intuitiva, especialmente se voc\u00ea estiver familiarizado com a API de Composi\u00e7\u00e3o do Vue 3. Essa API \u00e9 um conjunto de v\u00e1rios elementos que permitem a inclus\u00e3o de l\u00f3gica reativa e compon\u00edvel em seus componentes.<\/p>\n<p>Considere o c\u00f3digo a seguir.<\/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>No snippet acima, a tag <code>&lt;template&gt;<\/code> cont\u00e9m a marca\u00e7\u00e3o <a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-e-html\/\">HTML<\/a> definida de seu componente. Para exibir o valor da propriedade <code>count<\/code> da store do Pinia, voc\u00ea usa a sintaxe de vincula\u00e7\u00e3o de dados do Vue, expressa como <code>{{ count }}<\/code>.<\/p>\n<p>A fun\u00e7\u00e3o <code>useStore<\/code> fornece acesso \u00e0 store do Pinia, portanto voc\u00ea a importa de <strong>store.js<\/strong> usando <code>import { useStore } from '.\/store';<\/code>.<\/p>\n<p>Um recurso da API de Composi\u00e7\u00e3o do Vue 3, a fun\u00e7\u00e3o <code>setup<\/code> define o estado reativo e a l\u00f3gica do seu componente. Dentro da fun\u00e7\u00e3o, voc\u00ea chama <code>useStore()<\/code> para acessar a store do Pinia.<\/p>\n<p>Em seguida, <code>const count = store.count<\/code> acessa a propriedade <code>count<\/code> da store, tornando-a dispon\u00edvel no componente.<\/p>\n<p>Por fim, <code>setup<\/code> retorna <code>count<\/code>, permitindo que o template a renderize. O sistema de reatividade do Vue significa que o template do seu componente atualizar\u00e1 o valor de <code>count<\/code> sempre que ele for alterado na store.<\/p>\n<p>Abaixo est\u00e1 uma captura de tela do resultado.<\/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 tela do template Pinia Store Demo carregado em um navegador.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Captura de tela do template Pinia Store Demo carregado em um navegador.<\/figcaption><\/figure>\n<p>Esse exemplo ilustra as vantagens do Pinia:<\/p>\n<ul>\n<li><strong>Simplicidade<\/strong> \u2014 O Pinia permite acesso direto ao estado da store sem fun\u00e7\u00f5es de mapeamento. Em contraste, o Vuex precisa de <code>mapState<\/code> (ou helpers similares) para obter o mesmo acesso.<\/li>\n<li><strong>Acesso direto \u00e0 store<\/strong> \u2014 O Pinia permite que voc\u00ea acesse diretamente propriedades de estado (como <code>store.count<\/code>), tornando seu c\u00f3digo mais leg\u00edvel e compreens\u00edvel. Enquanto isso, o Vuex geralmente requer getters para acessar at\u00e9 mesmo propriedades fundamentais, adicionando complexidade que diminui a legibilidade.<\/li>\n<li><strong>Compatibilidade com a API de Composi\u00e7\u00e3o<\/strong> \u2014 Como o m\u00e9todo de configura\u00e7\u00e3o demonstra, a integra\u00e7\u00e3o do Pinia com a API de Composi\u00e7\u00e3o se alinha especialmente bem com o desenvolvimento moderno do <a href=\"https:\/\/kinsta.com\/pt\/blog\/bibliotecas-de-componentes-vue\/\">Vue<\/a>, proporcionando uma experi\u00eancia de codifica\u00e7\u00e3o mais uniforme.<\/li>\n<\/ul>\n<h2>Como modificar o estado com o Pinia<\/h2>\n<p>No Pinia, voc\u00ea modifica o estado de uma store usando a\u00e7\u00f5es, que s\u00e3o mais flex\u00edveis do que as muta\u00e7\u00f5es do Vuex. Considere a seguinte chamada de fun\u00e7\u00e3o, que incrementa a propriedade <code>count<\/code> do estado:<\/p>\n<pre><code class=\"language-js\">store.increment(); \/\/ Increments the count<\/code><\/pre>\n<p>Por outro lado, um equivalente em Vuex envolve a defini\u00e7\u00e3o de uma muta\u00e7\u00e3o, al\u00e9m de pelo menos uma a\u00e7\u00e3o:<\/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>A a\u00e7\u00e3o no Pinia e o c\u00f3digo equivalente em Vuex exemplificam uma diferen\u00e7a crucial na complexidade de c\u00f3digo das bibliotecas. Vamos explorar melhor essas diferen\u00e7as:<\/p>\n<ul>\n<li><strong>Muta\u00e7\u00e3o de estado direta vs indireta<\/strong> \u2014 Como demonstra a a\u00e7\u00e3o <code>increment<\/code>, as a\u00e7\u00f5es no Pinia alteram diretamente o estado da store. No Vuex, voc\u00ea s\u00f3 pode alterar o estado usando muta\u00e7\u00f5es, que devem ser <em>confirmadas <\/em>com o commit de a\u00e7\u00f5es. Essa separa\u00e7\u00e3o de processos garante que suas altera\u00e7\u00f5es de estado sejam rastre\u00e1veis, mas \u00e9 mais complexa e r\u00edgida do que a\u00e7\u00f5es equivalentes no Pinia.<\/li>\n<li><strong>Opera\u00e7\u00f5es ass\u00edncronas vs s\u00edncronas<\/strong> \u2014 Enquanto as muta\u00e7\u00f5es do Vuex s\u00e3o sempre s\u00edncronas e n\u00e3o podem conter processos ass\u00edncronos, as a\u00e7\u00f5es do Pinia podem conter c\u00f3digo s\u00edncrono <em>e<\/em> ass\u00edncrono. Como resultado, voc\u00ea pode realizar chamadas de API ou outras opera\u00e7\u00f5es ass\u00edncronas diretamente nas a\u00e7\u00f5es, o que torna a base de c\u00f3digo mais enxuta e concisa.<\/li>\n<li><strong>Sintaxe simplificada<\/strong> \u2014 O Vuex geralmente requer a defini\u00e7\u00e3o de muta\u00e7\u00f5es e a chamada de a\u00e7\u00f5es para confirm\u00e1-las mediante o commit. O Pinia elimina essa necessidade. A capacidade de alterar o estado dentro das a\u00e7\u00f5es reduz c\u00f3digo boilerplate e mant\u00e9m seu c\u00f3digo existente mais simples. No Vuex, atualiza\u00e7\u00f5es b\u00e1sicas de estado exigem a defini\u00e7\u00e3o de uma a\u00e7\u00e3o e de uma muta\u00e7\u00e3o, mesmo que a a\u00e7\u00e3o esteja apenas fazendo o commit da muta\u00e7\u00e3o.<\/li>\n<\/ul>\n<h2>A transi\u00e7\u00e3o do Vuex para o Pinia<\/h2>\n<p>A transi\u00e7\u00e3o para o Pinia pode proporcionar in\u00fameros benef\u00edcios em termos de simplicidade, flexibilidade e facilidade de manuten\u00e7\u00e3o, mas requer planejamento e considera\u00e7\u00e3o cuidadosos para garantir uma implementa\u00e7\u00e3o bem-sucedida.<\/p>\n<p>Antes de fazer a mudan\u00e7a, certifique-se de:<\/p>\n<ol start=\"1\">\n<li>Estar familiarizado com as diferen\u00e7as entre a arquitetura, os padr\u00f5es de gerenciamento de estado e as APIs do Pinia e do Vuex. Compreender essas diferen\u00e7as \u00e9 fundamental para refatorar seu c\u00f3digo com efic\u00e1cia e aproveitar ao m\u00e1ximo os recursos do Pinia.<\/li>\n<li>Analisar e refatorar o estado, as a\u00e7\u00f5es, as muta\u00e7\u00f5es e os getters do Vuex para ajust\u00e1-los \u00e0 estrutura do Pinia. <strong>Lembre-se: no Pinia, voc\u00ea define o estado como uma fun\u00e7\u00e3o.<\/strong> Voc\u00ea pode alterar diretamente os estados com a\u00e7\u00f5es e implementar getters com mais facilidade.<\/li>\n<li>Planejar como fazer a transi\u00e7\u00e3o dos seus m\u00f3dulos de store Vuex. O Pinia n\u00e3o usa m\u00f3dulos da mesma forma que o Vuex, mas voc\u00ea ainda pode estruturar suas stores para servirem a prop\u00f3sitos similares.<\/li>\n<li>Aproveitar o suporte aprimorado do Pinia para TypeScript. Se o seu projeto usa <a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-e-typescript\/\">TypeScript<\/a>, considere os recursos aprimorados de infer\u00eancia de tipo e tipagem do Pinia para melhorar a seguran\u00e7a de tipos e a experi\u00eancia do desenvolvedor.<\/li>\n<li>Revisar suas estrat\u00e9gias de teste para acomodar altera\u00e7\u00f5es no gerenciamento de estado. Esse processo pode envolver atualizar a forma como voc\u00ea simula stores ou a\u00e7\u00f5es em seus testes unit\u00e1rios e de integra\u00e7\u00e3o.<\/li>\n<li>Considerar como a transi\u00e7\u00e3o afeta a estrutura e a organiza\u00e7\u00e3o do seu projeto. Leve em conta fatores como conven\u00e7\u00f5es de nomenclatura e como voc\u00ea importa e usa stores entre componentes.<\/li>\n<li>Garantir a compatibilidade com outras bibliotecas. Verifique se h\u00e1 atualiza\u00e7\u00f5es necess\u00e1rias ou altera\u00e7\u00f5es de depend\u00eancia que a transi\u00e7\u00e3o possa afetar.<\/li>\n<li>Avaliar todas as altera\u00e7\u00f5es de desempenho. O Pinia geralmente \u00e9 mais leve que o Vuex, mas continue monitorando o desempenho do seu aplicativo durante e ap\u00f3s a transi\u00e7\u00e3o para garantir que n\u00e3o haja problemas.<\/li>\n<\/ol>\n<p>A convers\u00e3o de uma store de Vuex para Pinia envolve v\u00e1rias etapas para acomodar as diferen\u00e7as em suas estruturas e APIs. Considere a store Pinia do exemplo anterior.<\/p>\n<p>A mesma store em um arquivo <strong>store.js<\/strong> do Vuex aparece da seguinte forma.<\/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>Assim como a store anterior no Pinia, esse exemplo do Vuex cont\u00e9m um objeto <code>state<\/code> com uma \u00fanica propriedade <code>count<\/code> inicializada como <code>0<\/code>.<\/p>\n<p>O objeto <code>mutations<\/code> cont\u00e9m m\u00e9todos para alterar diretamente o estado, enquanto os m\u00e9todos do objeto <code>actions<\/code> fazem o commit da muta\u00e7\u00e3o <code>increment<\/code>.<\/p>\n<p>Em seguida, o objeto <code>getters<\/code> cont\u00e9m o m\u00e9todo <code>doubleCount<\/code>, que multiplica o estado <code>count<\/code> por <code>2<\/code> e retorna o resultado.<\/p>\n<p>Como esse c\u00f3digo demonstra, implementar uma store no Pinia envolve v\u00e1rias diferen\u00e7as percept\u00edveis em rela\u00e7\u00e3o ao Vuex:<\/p>\n<ul>\n<li><strong>Inicializa\u00e7\u00e3o<\/strong> \u2014 O Pinia n\u00e3o requer <code>Vue.use()<\/code>.<\/li>\n<li><strong>Estrutura<\/strong> \u2014 No Pinia, o estado \u00e9 uma fun\u00e7\u00e3o que retorna um objeto, permitindo melhor suporte a TypeScript e reatividade.<\/li>\n<li><strong>A\u00e7\u00f5es<\/strong> \u2014 A\u00e7\u00f5es no Pinia s\u00e3o m\u00e9todos que alteram diretamente o estado sem necessidade de muta\u00e7\u00f5es, simplificando o c\u00f3digo.<\/li>\n<li><strong>Getters<\/strong> \u2014 Embora semelhantes aos do Vuex, os Getters do Pinia s\u00e3o definidos na defini\u00e7\u00e3o da store e podem acessar diretamente o estado.<\/li>\n<\/ul>\n<h3>Como usar a store em componentes<\/h3>\n<p>Com Vuex, voc\u00ea poderia usar a store da seguinte forma:<\/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 o Pinia, essa utiliza\u00e7\u00e3o se torna:<\/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=\"Convers\u00f5es de store do Pinia.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Convers\u00f5es de store do Pinia.<\/figcaption><\/figure>\n<p>Este exemplo aborda uma convers\u00e3o b\u00e1sica. Para stores Vuex mais complexas, especialmente as que usam m\u00f3dulos, a convers\u00e3o envolveria uma reestrutura\u00e7\u00e3o mais detalhada para alinhar com a arquitetura do Pinia.<\/p>\n<h2>Como implantar seu aplicativo Vue<\/h2>\n<p>Antes da implanta\u00e7\u00e3o, inscreva-se para uma avalia\u00e7\u00e3o gratuita do <a href=\"https:\/\/sevalla.com\/application-hosting\/\">servi\u00e7o de Hospedagem de Aplicativos da Kinsta<\/a>. Voc\u00ea implantar\u00e1 o aplicativo <a href=\"https:\/\/docs.sevalla.com\/templates\/overviewnodejs-examples#node-js-application-with-a-dockerfile\">com a ajuda de um Dockerfile<\/a>.<\/p>\n<p>Crie um <strong>Dockerfile<\/strong> na raiz do seu projeto e cole o seguinte conte\u00fado:<\/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>Esse c\u00f3digo instrui o mecanismo Docker da Kinsta a instalar o Node.js (<code>FROM node:latest<\/code>), criar o diret\u00f3rio de trabalho (<code>WORKDIR \/app<\/code>), instalar os m\u00f3dulos do node a partir do arquivo <strong>package.json<\/strong> (<code>RUN npm install<\/code>) e definir o <a href=\"https:\/\/docs.sevalla.com\/templates\/overviewnodejs-examples#start-command\">comando start (<code>CMD [\"npm\", \"run\", \"start\"]<\/code>)<\/a> que ser\u00e1 chamado quando o aplicativo <a href=\"https:\/\/kinsta.com\/pt\/topicos\/vue-js\/\">Vue<\/a> for iniciado. Os comandos <code>COPY<\/code> copiam os arquivos ou diret\u00f3rios especificados para o diret\u00f3rio de trabalho.<\/p>\n<p>Depois disso, envie seu c\u00f3digo para um provedor Git de prefer\u00eancia (<a href=\"https:\/\/docs.sevalla.com\/applications\/git\/bitbucket#grant-access-to-the-kinsta-bitbucket-application\">Bitbucket<\/a>, <a href=\"https:\/\/docs.sevalla.com\/applications\/git\/github#authenticate-and-authorize\">GitHub<\/a> ou <a href=\"https:\/\/docs.sevalla.com\/applications\/git\/gitlab#authorize-the-kinsta-gitlab-application\">GitLab<\/a>). Quando seu reposit\u00f3rio estiver pronto, siga estas etapas para implantar seu aplicativo na Kinsta:<\/p>\n<ol start=\"1\">\n<li>Fa\u00e7a login ou crie uma conta para visualizar seu painel <a href=\"https:\/\/my.kinsta.com\/?lang=pt\" target=\"_blank\" rel=\"noopener noreferrer\">MyKinsta<\/a>.<\/li>\n<li>Autorize a Kinsta com seu provedor Git.<\/li>\n<li>Selecione <strong>Aplicativo<\/strong> na barra lateral esquerda e clique no bot\u00e3o <strong>Adicionar aplicativo<\/strong>.<\/li>\n<li>No modal que aparece, escolha o reposit\u00f3rio que voc\u00ea deseja implantar. Se voc\u00ea tiver v\u00e1rios branches, pode selecionar o branch desejado e dar um nome ao seu aplicativo.<\/li>\n<li>Selecione um dos locais de centros de dados dispon\u00edveis.<\/li>\n<li>Escolha seu ambiente de build e selecione <strong>Utilize o Dockerfile para configurar a imagem do cont\u00eainer<\/strong>.<\/li>\n<li>Se o seu Dockerfile n\u00e3o estiver na raiz do seu reposit\u00f3rio, use <strong>Contexto<\/strong>\u00a0para indicar o caminho e clique em <strong>Continuar<\/strong>.<\/li>\n<li>Voc\u00ea pode deixar a entrada <strong>Comando start<\/strong> vazia. A Kinsta usa <code>npm start<\/code> para iniciar seu aplicativo.<\/li>\n<li>Selecione o tamanho do pod e o n\u00famero de inst\u00e2ncias mais adequado para o seu aplicativo e clique em <strong>Continuar<\/strong>.<\/li>\n<li>Preencha as informa\u00e7\u00f5es do seu cart\u00e3o de cr\u00e9dito e clique em <strong>Criar aplicativo<\/strong>.<\/li>\n<\/ol>\n<p>Como alternativa \u00e0 hospedagem de aplicativos, voc\u00ea pode optar por implantar gratuitamente seu aplicativo Vue como um site est\u00e1tico na Kinsta com a <a href=\"https:\/\/sevalla.com\/static-site-hosting\/\">Hospedagem de site est\u00e1tico<\/a>.<\/p>\n<h2>Resumo<\/h2>\n<p>A transi\u00e7\u00e3o do Vuex para o Pinia marca uma evolu\u00e7\u00e3o significativa no gerenciamento de estado dentro do ecossistema Vue. A simplicidade, o suporte aprimorado ao TypeScript e o alinhamento com a API de Composi\u00e7\u00e3o do Vue 3 favorecem a escolha do Pinia para aplicativos Vue modernos.<\/p>\n<p>Quando estiver pronto para hospedar seu aplicativo Vue com a Kinsta, voc\u00ea ter\u00e1 acesso a uma infraestrutura r\u00e1pida, segura e confi\u00e1vel. <a href=\"https:\/\/kinsta.com\/pt\/inscreva-se\/\">Inscreva-se na Kinsta<\/a> e use nosso servi\u00e7o de <a href=\"https:\/\/sevalla.com\/application-hosting\/\">hospedagem de aplicativos<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>O framework Vue para JavaScript tornou-se popular para a cria\u00e7\u00e3o de interfaces de usu\u00e1rio e aplicativos de p\u00e1gina \u00fanica (SPAs). Para garantir que seus aplicativos de &#8230;<\/p>\n","protected":false},"author":199,"featured_media":67657,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[977,1014],"class_list":["post-67656","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>Domine o Gerenciamento de Estado no Vue.js - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Conhe\u00e7a o Pinia e como ele oferece gerenciamento mais leve e intuitivo para desenvolvedores gerenciarem e acessarem o estado compartilhado.\" \/>\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\/pt\/blog\/vue-pinia\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Domine o Gerenciamento de Estado no Vue.js\" \/>\n<meta property=\"og:description\" content=\"Conhe\u00e7a o Pinia e como ele oferece gerenciamento mais leve e intuitivo para desenvolvedores gerenciarem e acessarem o estado compartilhado.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/pt\/blog\/vue-pinia\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstapt\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-13T11:10:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-27T09:51:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/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=\"Conhe\u00e7a o Pinia e como ele oferece gerenciamento mais leve e intuitivo para desenvolvedores gerenciarem e acessarem o estado compartilhado.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/03\/master-state-management-in-vue-js-with-pinia-1.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jeremy Holcombe\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo estimado de leitura\" \/>\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\/pt\/blog\/vue-pinia\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/vue-pinia\/\"},\"author\":{\"name\":\"Jeremy Holcombe\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\"},\"headline\":\"Domine o Gerenciamento de Estado no Vue.js\",\"datePublished\":\"2024-03-13T11:10:16+00:00\",\"dateModified\":\"2024-03-27T09:51:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/vue-pinia\/\"},\"wordCount\":2483,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/vue-pinia\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/03\/master-state-management-in-vue-js-with-pinia.jpg\",\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/vue-pinia\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/vue-pinia\/\",\"url\":\"https:\/\/kinsta.com\/pt\/blog\/vue-pinia\/\",\"name\":\"Domine o Gerenciamento de Estado no Vue.js - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/vue-pinia\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/vue-pinia\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/03\/master-state-management-in-vue-js-with-pinia.jpg\",\"datePublished\":\"2024-03-13T11:10:16+00:00\",\"dateModified\":\"2024-03-27T09:51:21+00:00\",\"description\":\"Conhe\u00e7a o Pinia e como ele oferece gerenciamento mais leve e intuitivo para desenvolvedores gerenciarem e acessarem o estado compartilhado.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/vue-pinia\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/vue-pinia\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/vue-pinia\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/03\/master-state-management-in-vue-js-with-pinia.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/03\/master-state-management-in-vue-js-with-pinia.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/vue-pinia\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/pt\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Vue.js\",\"item\":\"https:\/\/kinsta.com\/pt\/topicos\/vue-js\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Domine o Gerenciamento de Estado no Vue.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/pt\/#website\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/pt\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstapt\/\",\"https:\/\/x.com\/kinsta_pt\",\"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\/pt\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\",\"name\":\"Jeremy Holcombe\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/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\/pt\/blog\/author\/jeremyholcombe\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Domine o Gerenciamento de Estado no Vue.js - Kinsta\u00ae","description":"Conhe\u00e7a o Pinia e como ele oferece gerenciamento mais leve e intuitivo para desenvolvedores gerenciarem e acessarem o estado compartilhado.","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\/pt\/blog\/vue-pinia\/","og_locale":"pt_PT","og_type":"article","og_title":"Domine o Gerenciamento de Estado no Vue.js","og_description":"Conhe\u00e7a o Pinia e como ele oferece gerenciamento mais leve e intuitivo para desenvolvedores gerenciarem e acessarem o estado compartilhado.","og_url":"https:\/\/kinsta.com\/pt\/blog\/vue-pinia\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstapt\/","article_published_time":"2024-03-13T11:10:16+00:00","article_modified_time":"2024-03-27T09:51:21+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/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":"Conhe\u00e7a o Pinia e como ele oferece gerenciamento mais leve e intuitivo para desenvolvedores gerenciarem e acessarem o estado compartilhado.","twitter_image":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/03\/master-state-management-in-vue-js-with-pinia-1.jpg","twitter_creator":"@kinsta_pt","twitter_site":"@kinsta_pt","twitter_misc":{"Escrito por":"Jeremy Holcombe","Tempo estimado de leitura":"12 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/pt\/blog\/vue-pinia\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/blog\/vue-pinia\/"},"author":{"name":"Jeremy Holcombe","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21"},"headline":"Domine o Gerenciamento de Estado no Vue.js","datePublished":"2024-03-13T11:10:16+00:00","dateModified":"2024-03-27T09:51:21+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/vue-pinia\/"},"wordCount":2483,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/vue-pinia\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/03\/master-state-management-in-vue-js-with-pinia.jpg","inLanguage":"pt-PT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/pt\/blog\/vue-pinia\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/pt\/blog\/vue-pinia\/","url":"https:\/\/kinsta.com\/pt\/blog\/vue-pinia\/","name":"Domine o Gerenciamento de Estado no Vue.js - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/vue-pinia\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/vue-pinia\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/03\/master-state-management-in-vue-js-with-pinia.jpg","datePublished":"2024-03-13T11:10:16+00:00","dateModified":"2024-03-27T09:51:21+00:00","description":"Conhe\u00e7a o Pinia e como ele oferece gerenciamento mais leve e intuitivo para desenvolvedores gerenciarem e acessarem o estado compartilhado.","breadcrumb":{"@id":"https:\/\/kinsta.com\/pt\/blog\/vue-pinia\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/pt\/blog\/vue-pinia\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/blog\/vue-pinia\/#primaryimage","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/03\/master-state-management-in-vue-js-with-pinia.jpg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/03\/master-state-management-in-vue-js-with-pinia.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/pt\/blog\/vue-pinia\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/pt\/"},{"@type":"ListItem","position":2,"name":"Vue.js","item":"https:\/\/kinsta.com\/pt\/topicos\/vue-js\/"},{"@type":"ListItem","position":3,"name":"Domine o Gerenciamento de Estado no Vue.js"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/pt\/#website","url":"https:\/\/kinsta.com\/pt\/","name":"Kinsta\u00ae","description":"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura","publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/pt\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/pt\/","logo":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstapt\/","https:\/\/x.com\/kinsta_pt","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\/pt\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21","name":"Jeremy Holcombe","image":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/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\/pt\/blog\/author\/jeremyholcombe\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/67656","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/users\/199"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/comments?post=67656"}],"version-history":[{"count":8,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/67656\/revisions"}],"predecessor-version":[{"id":67785,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/67656\/revisions\/67785"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/67656\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/67656\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/67656\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/67656\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/67656\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/67656\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/67656\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/67656\/translations\/es"},{"href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/67656\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media\/67657"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media?parent=67656"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/tags?post=67656"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/topic?post=67656"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}