[Vuejs]-Store does'nt persist pinia vuejs

by

0👍

I think the error is at the entry point of the application in these lines:

app.use(createPinia()); // this is using one instance of pinia
const pinia = createPinia() // here you are creating a second instance of pinia
pinia.use(piniaPluginPersistedstate) // here you are applying a package to the second instance that is not the one which is connected to the vue app.

Could you try this instead

app.use(pinia) // after the pinia.use declaration

0👍

Check the import statements and usage of PPS

And use a good sequence in import Statements:

import { createApp} from "vue";
import { createPinia } from "pinia";
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const app = createApp(App);
const pinia = createPinia();

pinia.use(piniaPluginPersistedstate)
app.use(pinia);

app.mount("#app");

Do not forget to name your store.
The name of the store is used to give a key to the storage.
For example:

import { defineStore } from 'pinia'

    export const useStore = defineStore('nameOfStore', {
      state: () => {
        return {
          someState: 'hello pinia',
        }
      },
      persist: true,
    })

The localStorage (if you use the default storage system) will have a key of ‘NameOfStore’ and values of ‘{someState: ‘hello pinia’}

Vueuse

if you do not want to use Pinia, you can use a utility from https://vueuse.org/.

npm i @vueuse/core

*main.js*
import { createPinia } from 'pinia'
createApp(App).use(createPinia()).mount('#app')
*store.js*
import { useStorage } from '@vueuse/core'
state: () => {
        return {
          someState: useStorage(someState: 'hello pinia'),
        }

usage:https://vueuse.org/core/useStorage/#usage

Leave a comment