CODEWITHSUNDEEP
vue.jsstatepersistpinia
Amélie K.
Amélie K.

Reputation: 41

store does'nt persist pinia vuejs

i work on vuejs version 2.9 and i want to persist my store when the page is refreshed.

i use pinia and make like the online documentation : https://prazdevs.github.io/pinia-plugin-persistedstate/guide/

main.ts :

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

const app = createApp(App);
app.use(createPinia());
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate);

app.use(router);
app.mount("#app");

my store :

import { defineStore } from "pinia";

export const TokenStore = defineStore({
  id: "token",
  state: () => ({
    email:"",
    pseudo: "",
    myid: "",
    nom:"",
    prenom:"",
    role: "",
    token:"",
    avatar:"",
  }),

  persist: true,  

});

An idea for the reason of it doesn't work ? Or an other way to persist my store ?

Upvotes: 0

Views: 4486

Answers (3)

Febryan Akhdani
Febryan Akhdani

Reputation: 33

Try this one in your main.ts

import { createPinia } from "pinia";
import piniaPluginPersistedState from "pinia-plugin-persistedstate";

const pinia = createPinia();
pinia.use(piniaPluginPersistedState);

then in your store

{
    persist: {
      storage: localStorage,
      paths: ["path you want to save in local storage"],
    },
  }

hope this answer is helpful

Upvotes: 0

Stéphane
Stéphane

Reputation: 1

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

Upvotes: 0

David Peña
David Peña

Reputation: 136

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

Upvotes: 1

Related Questions