{"id":26965,"date":"2023-08-08T09:38:42","date_gmt":"2023-08-08T07:38:42","guid":{"rendered":"https:\/\/www.dbi-services.com\/blog\/?p=26965"},"modified":"2023-08-08T14:36:04","modified_gmt":"2023-08-08T12:36:04","slug":"make-data-persistent-with-pinia","status":"publish","type":"post","link":"https:\/\/www.dbi-services.com\/blog\/make-data-persistent-with-pinia\/","title":{"rendered":"Make data persistent with Pinia"},"content":{"rendered":"\n<p>Welcome to this comprehensive guide on implementing persistent data in your Vue application using Pinia! If you&#8217;re already running a Vue application with Pinia, you&#8217;re in the right place. But if you&#8217;re not there yet, don&#8217;t worry \u2013 I&#8217;ve got you covered.<\/p>\n\n\n\n<p>Before we dive into the details, if you haven&#8217;t set up a Vue app with Pinia yet, make sure to check out my previous blog post titled <a href=\"https:\/\/www.dbi-services.com\/blog\/setting-up-your-first-pinia-store-in-vue-with-typescript-a-comprehensive-guide\/\" target=\"_blank\" rel=\"noreferrer noopener\">&#8220;Setting Up Your First Pinia Store in Vue with TypeScript: A Comprehensive Guide&#8221;<\/a>, that explains how to create a Vue app using Pinia store and typescript support.<\/p>\n\n\n\n<p>If you&#8217;re already comfortable with Vue and Pinia, you can jump right into the action with the Stackblitz I created for you:<br><a href=\"https:\/\/stackblitz.com\/edit\/vitejs-vite-cbygxb?file=.vscode%2Fsnippets.json\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/stackblitz.com\/edit\/vitejs-vite-cbygxb?file=.vscode%2Fsnippets.json<\/a><\/p>\n\n\n\n<p>There are multiple of way of getting persistent data with Pinia, we will study two of them:<br>The use of the pinia-plugin-persistedstate and the use of the localStorage from Vue.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-pinia-plugin-persistedstate\">Pinia-plugin-persistedstate<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"112\" height=\"160\" src=\"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2023\/07\/68747470733a2f2f692e696d6775722e636f6d2f7072554e7a72662e706e67.png\" alt=\"\" class=\"wp-image-26966\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Introduction<\/h3>\n\n\n\n<p>The goal of the pinia-plugin-persistedstate plugin is to offer persistence to Pinia stores, making it accessible to everyone and in any project through a unified API. Whether you prefer the default settings to save an entire store or require detailed customization with multiple storages and a personalized serializer, this plugin is made for you. It conveniently provides the persist option within the store you wish to persist, ensuring a seamless and consistent experience.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Is this plugin needed ?<\/h3>\n\n\n\n<p><em>\u201cShort answer: &#8220;no&#8221;. There are a lot of solutions to persist store data in storages such as localStorage that don&#8217;t even involve injecting a plugin into Pinia.\u201d<\/em><br>Note: We\u2019ll see a solution using localStorage in the second part of this blog.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Installation<\/h3>\n\n\n\n<p>First, we need to get the depency<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm i pinia-plugin-persistedstate<\/code><\/pre>\n\n\n\n<p>then, add the plugin to your Pinia instance inside the main.ts file<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { createApp } from 'vue'\nimport { createPinia } from 'pinia'\nimport piniaPluginPersistedstate from 'pinia-plugin-persistedstate'\n\nimport App from '.\/App.vue'\nimport router from '.\/router'\n\nconst app = createApp(App)\n\nconst pinia = createPinia()\npinia.use(piniaPluginPersistedstate)\napp.use(pinia)\napp.use(router)\n\napp.mount('#app')<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Configuration<\/h3>\n\n\n\n<p>Finally, in your store, add the persist option and set it to true<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { ref, computed } from 'vue'\nimport { defineStore } from 'pinia'\n\nexport const useCounterStore = defineStore(\n  'counter',\n  () =&gt; {\n    const count = ref(0)\n    const doubleCount = computed(() =&gt; count.value * 2)\n    function increment() {\n      count.value++\n    }\n\n    return { count, doubleCount, increment }\n  },\n  {\n    persist: true\n  }\n)\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Test<\/h3>\n\n\n\n<p>Start your application and open it in the browser:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm run dev<\/code><\/pre>\n\n\n\n<p>Click on the increment button<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"193\" height=\"167\" src=\"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2023\/07\/Image1.png\" alt=\"\" class=\"wp-image-26968\" \/><\/figure>\n\n\n\n<p>Refresh the page and \u2026 Tada, the value for the count property is still here.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Bonus<\/h3>\n\n\n\n<p>By default with the plugin, it\u2019s important to notice that when using the persist option, the data are saved in the localStorage. The id of the store is used as a default key for storage (in our case, \u201ccounter\u201d). The default serializer\/deserializer used is JSON.stringify \/ JSON.parse.<\/p>\n\n\n\n<p>If you wish to change this default behavior, it\u2019s possible by passing an object to the persist property. You can find more information in the documentation of the plugin.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Default LocalStorage Method<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Introduction<\/h3>\n\n\n\n<p>Using localStorage with Pinia is one of the best way to persist values without installing additional plugins.<\/p>\n\n\n\n<p>Without Pinia you would usually use the Vue watch function combined with localStorage. The watch function allows you to observe changes to the properties and execute custom logic when the property changes.<\/p>\n\n\n\n<p>Pinia stores are inherently reactive, meaning that any changes made to the store&#8217;s data will automatically trigger reactivity updates in any component that is using that data. When you update the state in a Pinia store, all components that are using that state will automatically re-render to reflect the updated data.<\/p>\n\n\n\n<p>To achieve persistent data with Pinia, you&#8217;ll need to combine it with some form of data storage, such as local storage. And this is exactly what we are going to do now.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Configuration<\/h3>\n\n\n\n<p>First, update your store to save counter state into the local storage. <br>Comment the persist object used previously.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { ref, computed } from 'vue'\nimport { defineStore } from 'pinia'\n\nexport const useCounterStore = defineStore(\n  'counter',\n  () =&gt; {\n    \/\/ Load the initial data from localStorage or default to 0\n    const initialCount = JSON.parse(localStorage.getItem('counterData') || '0')\n    const count = ref(initialCount)\n    const doubleCount = computed(() =&gt; count.value * 2)\n    function increment() {\n      count.value++\n      \/\/ Save the updated data to localStorage whenever it changes\n      localStorage.setItem('counterData', JSON.stringify(count.value))\n    }\n\n    return { count, doubleCount, increment }\n  }\n  \/\/ {\n  \/\/   persist: true\n  \/\/ }\n)\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Test<\/h3>\n\n\n\n<p>If you restart your application and play with it, you\u2019ll notice that data are still in the localStorage.<br>We might want to have the possibilities to clear our localStorage.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">How to clear localStorage<\/h3>\n\n\n\n<p>The easiest idea is to add a button that clears our localStorage when we want to. To achieve that, we\u2019ll start by adding a new action \u201cclearLocalStorage\u201d to our store:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>...\nfunction clearLocalStorage() {\n      localStorage.removeItem('counterData');\n    }\n\n    return { count, doubleCount, increment, clearLocalStorage }\n...\n<\/code><\/pre>\n\n\n\n<p>Add a button in the template of our views to call the clearLocalStorage() action:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;button @click=\"counter.clearLocalStorage()\"&gt;Clear&lt;\/button&gt;<\/code><\/pre>\n\n\n\n<p>Click the clear button.&nbsp; The data are not reset to 0, you need to refresh the page, why is that?<br>We are currently clearing the data from the localStorage, but the state of our store is not impacted by that. The value of the count property is reset to 0 after a refresh of the page, because it takes its value from the localStorage on store initialization.<\/p>\n\n\n\n<p>Let\u2019s edit our code to fix that:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function clearLocalStorage() {\n      count.value = 0;\n      localStorage.removeItem('counterData');\n}<\/code><\/pre>\n\n\n\n<p>With this update, the reset action will set the count value 0 before clearing the localStorage. As a result, the count will be reset to its initial value every time you click the &#8220;Reset&#8221; button, ensuring that the store state and localStorage stay in sync.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>In conclusion, making data persistent with Pinia offers a powerful way to maintain state across sessions and ensure a seamless user experience. In this blog, we explored two methods of achieving persistence: using the <code>pinia-plugin-persistedstate<\/code> and leveraging the default <code>LocalStorage<\/code> method.<\/p>\n\n\n\n<p>Both methods have their merits, and the choice between them depends on the complexity and requirements of the project.<\/p>\n\n\n\n<p>In the end, whether you opt for the <code>pinia-plugin-persistedstate<\/code> or use the default <code>LocalStorage<\/code> method, Pinia empowers you to create robust Vue applications with persistent data. To delve deeper into the <code>pinia-plugin-persistedstate<\/code> and explore its full capabilities, you can refer to the documentation provided.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">References<\/h2>\n\n\n\n<p><a href=\"https:\/\/prazdevs.github.io\/pinia-plugin-persistedstate\/guide\/\">https:\/\/prazdevs.github.io\/pinia-plugin-persistedstate\/guide\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Welcome to this comprehensive guide on implementing persistent data in your Vue application using Pinia! If you&#8217;re already running a Vue application with Pinia, you&#8217;re in the right place. But if you&#8217;re not there yet, don&#8217;t worry \u2013 I&#8217;ve got you covered. Before we dive into the details, if you haven&#8217;t set up a Vue [&hellip;]<\/p>\n","protected":false},"author":87,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3029],"tags":[],"type_dbi":[],"class_list":["post-26965","post","type-post","status-publish","format-standard","hentry","category-web"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.2 (Yoast SEO v27.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Make data persistent with Pinia - dbi Blog<\/title>\n<meta name=\"description\" content=\"Learn how to make data persistent in Vue applications using Pinia. Explore two methods - pinia-plugin-persistedstate and LocalStorage.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.dbi-services.com\/blog\/make-data-persistent-with-pinia\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Make data persistent with Pinia\" \/>\n<meta property=\"og:description\" content=\"Learn how to make data persistent in Vue applications using Pinia. Explore two methods - pinia-plugin-persistedstate and LocalStorage.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.dbi-services.com\/blog\/make-data-persistent-with-pinia\/\" \/>\n<meta property=\"og:site_name\" content=\"dbi Blog\" \/>\n<meta property=\"article:published_time\" content=\"2023-08-08T07:38:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-08T12:36:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2023\/07\/68747470733a2f2f692e696d6775722e636f6d2f7072554e7a72662e706e67.png\" \/>\n<meta name=\"author\" content=\"Joan Frey\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joan Frey\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.dbi-services.com\/blog\/make-data-persistent-with-pinia\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.dbi-services.com\/blog\/make-data-persistent-with-pinia\/\"},\"author\":{\"name\":\"Joan Frey\",\"@id\":\"https:\/\/www.dbi-services.com\/blog\/#\/schema\/person\/c03c47649664fe73b27ce457e99f5b06\"},\"headline\":\"Make data persistent with Pinia\",\"datePublished\":\"2023-08-08T07:38:42+00:00\",\"dateModified\":\"2023-08-08T12:36:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.dbi-services.com\/blog\/make-data-persistent-with-pinia\/\"},\"wordCount\":897,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/www.dbi-services.com\/blog\/make-data-persistent-with-pinia\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2023\/07\/68747470733a2f2f692e696d6775722e636f6d2f7072554e7a72662e706e67.png\",\"articleSection\":[\"Web\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.dbi-services.com\/blog\/make-data-persistent-with-pinia\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.dbi-services.com\/blog\/make-data-persistent-with-pinia\/\",\"url\":\"https:\/\/www.dbi-services.com\/blog\/make-data-persistent-with-pinia\/\",\"name\":\"Make data persistent with Pinia - dbi Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.dbi-services.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.dbi-services.com\/blog\/make-data-persistent-with-pinia\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.dbi-services.com\/blog\/make-data-persistent-with-pinia\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2023\/07\/68747470733a2f2f692e696d6775722e636f6d2f7072554e7a72662e706e67.png\",\"datePublished\":\"2023-08-08T07:38:42+00:00\",\"dateModified\":\"2023-08-08T12:36:04+00:00\",\"author\":{\"@id\":\"https:\/\/www.dbi-services.com\/blog\/#\/schema\/person\/c03c47649664fe73b27ce457e99f5b06\"},\"description\":\"Learn how to make data persistent in Vue applications using Pinia. Explore two methods - pinia-plugin-persistedstate and LocalStorage.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.dbi-services.com\/blog\/make-data-persistent-with-pinia\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.dbi-services.com\/blog\/make-data-persistent-with-pinia\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.dbi-services.com\/blog\/make-data-persistent-with-pinia\/#primaryimage\",\"url\":\"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2023\/07\/68747470733a2f2f692e696d6775722e636f6d2f7072554e7a72662e706e67.png\",\"contentUrl\":\"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2023\/07\/68747470733a2f2f692e696d6775722e636f6d2f7072554e7a72662e706e67.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.dbi-services.com\/blog\/make-data-persistent-with-pinia\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\/\/www.dbi-services.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Make data persistent with Pinia\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.dbi-services.com\/blog\/#website\",\"url\":\"https:\/\/www.dbi-services.com\/blog\/\",\"name\":\"dbi Blog\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.dbi-services.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.dbi-services.com\/blog\/#\/schema\/person\/c03c47649664fe73b27ce457e99f5b06\",\"name\":\"Joan Frey\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/1e650cf665b4d44dd186355827c0b049d2f95c8cbb45fd10d4e7cb255be67ecb?s=96&d=mm&r=g\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/1e650cf665b4d44dd186355827c0b049d2f95c8cbb45fd10d4e7cb255be67ecb?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/1e650cf665b4d44dd186355827c0b049d2f95c8cbb45fd10d4e7cb255be67ecb?s=96&d=mm&r=g\",\"caption\":\"Joan Frey\"},\"url\":\"https:\/\/www.dbi-services.com\/blog\/author\/joanfrey\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Make data persistent with Pinia - dbi Blog","description":"Learn how to make data persistent in Vue applications using Pinia. Explore two methods - pinia-plugin-persistedstate and LocalStorage.","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:\/\/www.dbi-services.com\/blog\/make-data-persistent-with-pinia\/","og_locale":"en_US","og_type":"article","og_title":"Make data persistent with Pinia","og_description":"Learn how to make data persistent in Vue applications using Pinia. Explore two methods - pinia-plugin-persistedstate and LocalStorage.","og_url":"https:\/\/www.dbi-services.com\/blog\/make-data-persistent-with-pinia\/","og_site_name":"dbi Blog","article_published_time":"2023-08-08T07:38:42+00:00","article_modified_time":"2023-08-08T12:36:04+00:00","og_image":[{"url":"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2023\/07\/68747470733a2f2f692e696d6775722e636f6d2f7072554e7a72662e706e67.png","type":"","width":"","height":""}],"author":"Joan Frey","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Joan Frey","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.dbi-services.com\/blog\/make-data-persistent-with-pinia\/#article","isPartOf":{"@id":"https:\/\/www.dbi-services.com\/blog\/make-data-persistent-with-pinia\/"},"author":{"name":"Joan Frey","@id":"https:\/\/www.dbi-services.com\/blog\/#\/schema\/person\/c03c47649664fe73b27ce457e99f5b06"},"headline":"Make data persistent with Pinia","datePublished":"2023-08-08T07:38:42+00:00","dateModified":"2023-08-08T12:36:04+00:00","mainEntityOfPage":{"@id":"https:\/\/www.dbi-services.com\/blog\/make-data-persistent-with-pinia\/"},"wordCount":897,"commentCount":0,"image":{"@id":"https:\/\/www.dbi-services.com\/blog\/make-data-persistent-with-pinia\/#primaryimage"},"thumbnailUrl":"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2023\/07\/68747470733a2f2f692e696d6775722e636f6d2f7072554e7a72662e706e67.png","articleSection":["Web"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.dbi-services.com\/blog\/make-data-persistent-with-pinia\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.dbi-services.com\/blog\/make-data-persistent-with-pinia\/","url":"https:\/\/www.dbi-services.com\/blog\/make-data-persistent-with-pinia\/","name":"Make data persistent with Pinia - dbi Blog","isPartOf":{"@id":"https:\/\/www.dbi-services.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.dbi-services.com\/blog\/make-data-persistent-with-pinia\/#primaryimage"},"image":{"@id":"https:\/\/www.dbi-services.com\/blog\/make-data-persistent-with-pinia\/#primaryimage"},"thumbnailUrl":"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2023\/07\/68747470733a2f2f692e696d6775722e636f6d2f7072554e7a72662e706e67.png","datePublished":"2023-08-08T07:38:42+00:00","dateModified":"2023-08-08T12:36:04+00:00","author":{"@id":"https:\/\/www.dbi-services.com\/blog\/#\/schema\/person\/c03c47649664fe73b27ce457e99f5b06"},"description":"Learn how to make data persistent in Vue applications using Pinia. Explore two methods - pinia-plugin-persistedstate and LocalStorage.","breadcrumb":{"@id":"https:\/\/www.dbi-services.com\/blog\/make-data-persistent-with-pinia\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.dbi-services.com\/blog\/make-data-persistent-with-pinia\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.dbi-services.com\/blog\/make-data-persistent-with-pinia\/#primaryimage","url":"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2023\/07\/68747470733a2f2f692e696d6775722e636f6d2f7072554e7a72662e706e67.png","contentUrl":"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2023\/07\/68747470733a2f2f692e696d6775722e636f6d2f7072554e7a72662e706e67.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.dbi-services.com\/blog\/make-data-persistent-with-pinia\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https:\/\/www.dbi-services.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Make data persistent with Pinia"}]},{"@type":"WebSite","@id":"https:\/\/www.dbi-services.com\/blog\/#website","url":"https:\/\/www.dbi-services.com\/blog\/","name":"dbi Blog","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.dbi-services.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.dbi-services.com\/blog\/#\/schema\/person\/c03c47649664fe73b27ce457e99f5b06","name":"Joan Frey","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/1e650cf665b4d44dd186355827c0b049d2f95c8cbb45fd10d4e7cb255be67ecb?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/1e650cf665b4d44dd186355827c0b049d2f95c8cbb45fd10d4e7cb255be67ecb?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1e650cf665b4d44dd186355827c0b049d2f95c8cbb45fd10d4e7cb255be67ecb?s=96&d=mm&r=g","caption":"Joan Frey"},"url":"https:\/\/www.dbi-services.com\/blog\/author\/joanfrey\/"}]}},"_links":{"self":[{"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/posts\/26965","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/users\/87"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/comments?post=26965"}],"version-history":[{"count":19,"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/posts\/26965\/revisions"}],"predecessor-version":[{"id":27174,"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/posts\/26965\/revisions\/27174"}],"wp:attachment":[{"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/media?parent=26965"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/categories?post=26965"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/tags?post=26965"},{"taxonomy":"type","embeddable":true,"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/type_dbi?post=26965"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}