Pinia 如何与 LocalStorage 协作进行持久数据存储

最编程 2024-07-12 07:56:51

...

写在前面

Pinia现在做为Vue3的常用状态管理工具，在涉及到一些全局状态的读写的时候非常方便，但是如果在页面关闭之后重新打开也能保存之前存储的状态呢，我们一起研究一下

思路一

保存数据到本地，自然而然我们就想到了将数据存储到LocalStorage, 一个比较简单的想法是: 在读写层级中间层做一个处理，store在存储数据时候我们可以使用actions作为写的中间层。

actions: {
setValue(value) {
    localStorage.setItem('xxx', value)
    this.value = value
    }
}

这样存储的问题就解决了，然后在页面的初始周期再去读这些值，然后设置store的初始值。

思路二

上面的问题虽然也能解决问题，但是当需要持久化存储的数据多了之后，这些数据的维护就相当麻烦，并且这种方法也并不优雅。看了一下Pinia的官方文档有提供Pinia的形式，用于专门做中间件层的处理，可以做到全自动的持久化存储。然后就有了下面的思路方案：

新建一个plugins文件，我们叫做local.ts

import type { PiniaPluginContext } from 'pinia';

/** 只有该数组内的状态会被持久化存储 */
const localStoreId = ['localInfo'];

/** 写一个插件，持久化存储pinia的状态 */
export default function myPlugin({ store }: PiniaPluginContext) {
    if (localStoreId.includes(store.$id)) {
        store.$subscribe(() => {
            localStorage.setItem(store.$id, JSON.stringify(store.$state));
        });

        try {
            const localStr = localStorage.getItem(store.$id);
            if (localStr) {
                const localData = JSON.parse(localStr);
                store.$state = localData;
            }
        } catch (error) {
            console.error('获取本地存储状态失败', error);
        }
    }
}

然后引入使用

import localStorePlugin from '@/store/plugins/local';

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

这样我们命名为localInfo 的store就会自动存储了，其他的也不会受到影响


/** 目标相关持久化存储store */
export default defineStore('localInfo', () => {
    const userInfo = ref(null as UserInfo | null);
    const phoneList = ref([] as any[]);
    return {
        userInfo,
        phoneList
    };
});

这样我们在浏览器使用的时候不管什么时候修改该storage都会把数据持久化存储到本地，下次页面刷新的时候也会将数据读到store里面，完工。

上一篇： Flutter 键的原理和用法（IV）全局键的用法

下一篇： mimikatz 获取 win10 密码