商店不坚持pinia vuejs

wmomyfyw  于 2023-02-24  发布在  Vue.js
关注(0)|答案(2)|浏览(125)

我工作在vuejsversion2.9上,我想在页面刷新时保持我的存储。
我使用pinia并制作类似的在线文档:https://prazdevs.github.io/pinia-plugin-persistedstate/guide/
主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");

我的店铺:

import { defineStore } from "pinia";

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

  persist: true,  

});

一个想法的原因是它不工作?或其他方式来坚持我的店?

xtfmy6hx

xtfmy6hx1#

我认为错误出现在应用程序的入口点的以下行中:

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.

你能试试这个吗

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

rqenqsqc2#

检查PPS的导入语句和使用情况
并在import语句中使用良好的顺序:

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");

不要忘记命名存储。存储的名称用于为存储给予密钥。例如:

import { defineStore } from 'pinia'

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

localStorage(如果使用默认存储系统)的键为“NameOfStore”,值为“{someState:“你好,皮尼亚”}

我们

如果不想使用Pinia,可以使用https://vueuse.org/中实用程序。
npm i @使用/核心

*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'),
        }

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

相关问题