title: How to create a persistant state for Pinia + Quasar?
body: <p>I'm using Pinia for state managment, and I want the state to persist when the page is refeshed.</p>
  <p>I'm aware of two options:</p>
  <ol>
  <li><p>Use a plugin. Vuex has a <a href="https://github.com/robinvdvleuten/vuex-persistedstate" rel="noreferrer">vuex-persistedstate</a> plugin for this, and Pinia has <a href="https://github.com/Seb-L/pinia-plugin-persist" rel="noreferrer">a similar plugin</a> but it's still under development.</p>
  </li>
  <li><p>Use local storage. Luckily Quasar has a <a href="https://quasar.dev/quasar-plugins/web-storage#introduction" rel="noreferrer">LocalStorage plugin</a> which would be nice to use here. But I'm not sure how to integrate it with Pinia, thus the reason for this post.</p>
  </li>
  </ol>
  <p>I found a nice <a href="https://stephanlangeveld.medium.com/simple-local-storage-implementation-using-vue-3-vueuse-and-pinia-with-zero-extra-lines-of-code-cb9ed2cce42a" rel="noreferrer">tutorial</a> doing something similar with Pinia + <a href="https://vueuse.org/" rel="noreferrer">Vueuse</a>.</p>
  <p>And I tried adapting it to my needs with Pinia + TypeScript + Quasar LocalStorage Plugin as per below:</p>
  <pre><code>import { User } from 'firebase/auth';
  import { defineStore } from 'pinia';
  import { LocalStorage } from 'quasar';
  
  type CreateMutable&lt;T&gt; = { -readonly [P in keyof T]: CreateMutable&lt;T[P]&gt; };
  
  export const useUserStore = defineStore('user', {
    state: () =&gt; ({
      // user: {} as CreateMutable&lt;User&gt;, // This was my previous non-persistent state
      user: LocalStorage.set('user', {}) as unknown as CreateMutable&lt;User&gt;, // This is my attempt at using LocalStorage persistent state
    }),
    actions: {
      setUser(userData: User) {
        this.user = userData;
      },
      setPhotoURL(photoURLData: string | null) {
        this.user.photoURL = photoURLData;
      },
    },
  });
  </code></pre>
  <p>Unfortunately it doesn't work.</p>
  <p>The state does not persist on page refresh.</p>
  <p>Any ideas on how to make this work?</p>