title: Setting up pinia persistent store on an individual web page
body: <p>I have a simple vue js app and its only for one page only but i also want to access pinia stores when a i navigate to another page of the larger app.</p>
  <p>I have setup vue 3, pinia and pinia persistent storage like this</p>
  <pre><code>&lt;script src=&quot;https://unpkg.com/vue@3&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/pinia/2.0.14/pinia.iife.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;https://unpkg.com/pinia-plugin-persistedstate-2&quot;&gt;&lt;/script&gt;
  </code></pre>
  <p>This works</p>
  <pre><code>const { createApp } = Vue
  
    createApp({
      data() {
        return {
          firstname: 'Hello Vue!'
        }
      }
    }).mount('#app')
  </code></pre>
  <p>Since pinia and pinia persistent state are available on the cdn, how can i port this to work entirely on the browser and can i access the stored data if i navigate to another browser page?</p>
  <pre><code>import { defineStore } from 'pinia'
  import { createPersistedStatePlugin } from 'pinia-plugin-persistedstate-2'
  
  export const useStore = defineStore('main', {
    state: () =&gt; {
      return {
        someState: 'hello pinia',
      }
    },
    persist: true,
  })
  </code></pre>