如何避免用户刷新浏览器导致全局状态管理数据丢失(VUE2-Vuex/Vue3-Pinia)

最近遇到用户刷新浏览器导致各个页面使用的Store数据丢失，看了一些处理方法，有的使用插件进行永久存储，但我并不觉得是个好的处理方式，或者针对用户个人信息这种，我不想用这种方法。于是，另辟蹊径。

Vue3 + Pinia

store 若存在则读取，若丢失则读取缓存内的，我是uniapp的写法，可以更换缓存写法。

/** 默认 */
const defaultState: UserState = {
    token: "",
    userInfo: {},
    type: '0',
}
/** 缓存读取 */
let theState = uni.getStorageSync('useUserStore') ? JSON.parse(uni.getStorageSync('useUserStore')) : { ...defaultState };

export const useUserStore = defineStore('user', {
    state: (): UserState => (theState),
    // 其他代码省略

App.vue

onMounted(() => {
    window.addEventListener("unload", saveState);
    window.addEventListener("load", () => {
        uni.removeStorageSync("useUserStore");
    });
});
const saveState = () => {
    uni.setStorageSync(
        "useUserStore",
        JSON.stringify(userStore.userProfile)
    );
};

Vue2 + Vuex

其实和vue3没什么差别

store

const defaultState = {
    token: "",
    userInfo: {},
    type: 0,
}
let theState = uni.getStorageSync('useUserStore') ? JSON.parse(uni.getStorageSync('useUserStore')) : { ...defaultState };
export default {
    state: theState,

App.vue

mounted() {
        window.addEventListener("unload", this.saveState);
        window.addEventListener("load", () => {
            uni.removeStorageSync("useUserStore");
        });
    },
    methods: {
        saveState() {
            uni.setStorageSync(
                "useUserStore",
                JSON.stringify(this.$store.state.useUserStore)
            );
        },
    },

重新登录系统，测试，成功！