A weird bug that loses data when I refresh the page

[mofada]

1. On the home page, click the login out button to log out
2. On the login page, enter your email address and name to enter the home page
3. Click Refresh (F5) to refresh the interface, user information will be lost (upper right corner)

tip: However, directly enter the login (http://localhost:3000/login), enter the email address and name, click login, and enter the home page. At this time, clicking refresh will not lose user information.

you can find code in the here pinia-plugin-persist-bug-recurrent

https://user-images.githubusercontent.com/22286246/175505542-12654c5b-ae1e-4473-b4aa-cc7305015c6d.mp4

[chatgpt10]

我遇到类似的问题

[mofada]

我遇到类似的问题

后来解决了吗？

[rationalthinker1]

@Seb-L, any update? Is it possible to revert back?

[mofada]

@Seb-L, any update? Is it possible to revert back?

I try to use localStorage alone for storage and it works fine

[mofada]

Temporary workaround, the works fine

[rationalthinker1]

I had to revert back to the older version. It works there.

[shishtpal]

I am also facing the same issue, Pinia State is changing but not saving in localStorage Is There any way So that I can force to update pinia-plugin-persist to save current state?

[Aurorxa]

I guess, maybe you are using the store in pinia in other ts or js files, because of this, the state in the store is no longer responsive, in other words, pinia will not be hijacked again, at this time, it needs to be handled manually.

---

中文翻译： 我猜测，可能你们是在其他的 ts 或 js 文件中使用的 pinia 中的 store ，因为这样的话，store 中的 state 就不再是响应式的，换言之，pinia 不会再劫持，这个时候，需要手动处理。

I used vue-i18n in the project and my code is as follows，code directory is src/i18n/index.ts

import {createI18n} from 'vue-i18n'
import ZH from "@/i18n/lang/zh"
import EN from "@/i18n/lang/en"
import localStore from 'store2'

const messages = {
    en: {
        message: {
            ...EN
        }
    },
    zh: {
        message: {
            ...ZH
        }
    }
}

const i18n = createI18n({
    legacy: false, // 使用 Composition API
    globalInjection: true, // 全局使用 t 函数
    locale: localStore.get('language') === null ? 'zh' : (localStore.get('language').hasOwnProperty('language') ? localStore.get('language').language : 'zh'),
    messages
})

export default i18n

---

中文翻译： 我在项目中使用了 vue-i18n，我的代码如下，目录是 src/i18n/index.ts

import {createI18n} from 'vue-i18n'
import ZH from "@/i18n/lang/zh"
import EN from "@/i18n/lang/en"
import localStore from 'store2'

const messages = {
    en: {
        message: {
            ...EN
        }
    },
    zh: {
        message: {
            ...ZH
        }
    }
}

const i18n = createI18n({
    legacy: false, // 使用 Composition API
    globalInjection: true, // 全局使用 t 函数
    locale: localStore.get('language') === null ? 'zh' : (localStore.get('language').hasOwnProperty('language') ? localStore.get('language').language : 'zh'),
    messages
})

export default i18n

---

[wavyhair]

这个问题如何解决呢？

[Aurorxa]

这个问题如何解决呢？

手动处理啊，

[xiangshu233]

@Aurorxa 大佬你说的很对，但是我没看懂你的这句话，我有一段代码在 store 挂载之前使用了里面的 state，然后就导致了 插件不再缓存，删掉后就正常了

[Aurorxa]

@Aurorxa 大佬你说的很对，但是我没看懂你的这句话，我有一段代码在 store 挂载之前使用了里面的 state，然后就导致了 插件不再缓存，删掉后就正常了

我也是萌新啊，我只是猜测应该这么做的，具体源码我也没有分析，哈哈~