【超详细】vue3+pinia+自动持久化插件+自定义存储器对象实现状态数据持久化_pinia-plugin-persistedstate 存到cookie-优快云博客

本文超详细讲解了　vue3+pinia+自动持久化插件+自定义存储器对象实现状态数据持久化　的配置和代码实现，会不会详细得令人发指😄😄😄！
　之前在 vue2 版本中，普遍都是使用 vuex 插件和手写操作 localStorage 或 sessionStorage 的 actions 方法对应用中组件间的共享数据（状态）进行管理。
　由于 vuex 比较臃肿，并且对 TS 支持不够好，vue3 中改为普遍使用 pinia 这个轻量级的状态数据管理插件，该插件也是官方在 vuex 的基础进行优化和修改的，区别是更轻量，性能更好，对 TS 语法的支持较好，并且去除了多余的 Mutations 配置项，直接例用 actions 配置项配置操作 state 数据的方法即可！
　例用 pinia 插件 + 数据持久化插件 pinia-plugin-persistedstate，可以在应用运行中自动持久化 pinia store state 中的数据到浏览器自带本地存储 window.localStorage 和 window.sessionStorage （这两个本地存储器是数据持久化插件 pinia-plugin-persistedstate默认自带支持的），及支持自定义存储器对象，比如本例自定义了一个 cookie 的存储器对象 cookieStorage。
　话不多说，直接入正题！

以下是配置部分：

1、安装所需插件包：pinia、pinia-plugin-persistedstate、js-cookie

npm i pinia pinia-plugin-persistedstate js-cookie

2、在 ./src/store 目录下创建 cookieStorage.js 存储器对象：

// cookieStorage.js
/**
 *  为 pinia-plugin-persistedstate 插件自定义 storage 存储器对象 cookieStorage，
 *  自定义存储器对象，必须按以下要求实现 setItem 和 getItem 方法，并且在这两个方法调用设置/读取 cookie 等
 *  本地存储的方法必须是同步的，不能是异步的，
 *  这里使用 js-cookie 第三方 cookie 操作包实现自定义 storage 存储器对象 cookieStorage
 */
import Cookie from 'js-cookie'

export const cookieStorage = {
   
   
    // 参数 key 为 userStore.js 中 persist 配置项中保存到 storage 存储中的 key 键名
    // 参数 state 为 userStore.js 中 persist 配置项中要持久化到 storage 的 state 属性名，不是全部 state
    setItem(key, state) {
   
   
        // console.log('cookieStorage setItem state:', state)
        // js-cookie 包 setItem 方法的第三个参数配置对象解释：
        // expires: 为数字时表示过期天数，缺少该参数，表示仅会话期间有效，支持 new Date 对象及其字符串格式
        // path：默认值为/，表示全站点所有路径页面可操作该 cookie，为 '' 空值表示仅当前页面可操作该 cookie
        // domain：缺省该参数默认值为当前域名及其子域名可操作该 cookie
        // return Cookie.setItem(key, state, { expires: 9999, path: '/', domain: '' })
        return Cookie.set(key, state)

    },
    getItem(key) {
   
     // 首次自动加载这个自定义cookie存储器时， getItem 方法比 setItem 方法先执行
        // console.log('cookieStorage getItem:', key, Cookie.get(key))
        let value = Cookie.get(key) || '{}'