Pinia的持久化存储和web-localStorage-plus到底该用谁-五八三

大家好，我是苏先生，一名热爱钻研、乐于分享的前端工程师，跟大家分享一句我很喜欢的话：人活着，其实就是一种心态，你若觉得快乐，幸福便无处不在

github与好文

前言

今天刷到了一篇关于 Pinia 使用介绍的文章，其中提到了使用pinia-plugin-persistedstate来进行状态的持久化，而我去年为公司开发的 vue3 项目，关于状态的管理是基于web-localstorage-plus实现的

因此，今天就从多个角度来分析对比下两个存储库

初始化

pinia-plugin-persistedstate

我们必须先安装 pinia，因为它是作为 pinia 的 plugin 为我们提供服务的

js yarn add pinia

然后导入并创建 pinia 根仓库

// 导入pinia 
import { createPinia } from "pinia"; 
// 创建根存储 
const pinia = createPinia()

现在我们来安装主角

yarn add pinia-plugin-persistedstate

接着引入并作为 plugin 注册给 pinia

// 引入pinia-plugin-persistedstate
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
// 注册给pinia
pinia.use(piniaPluginPersistedstate)

最后，将 pinia 作为 plugin 注册给 vue

app.use(pinia);

web-localstorage-plus

第一步，使用yarn进行安装

yarn add web-localstorage-plus

第二步，引入与初始化仓库

// 引入web-localstorage-plus
import createStorage from "web-localstorage-plus";
// 初始化根存储
createStorage({
  rootName:'spp-storage'
})

总结

由于pinia-plugin-persistedstate是依赖pinia的，所以它的初始化步骤要繁琐一点，而web-localstorage-plus则不依赖第三方，因此使用起来要更便捷一些

模块化管理

pinia-plugin-persistedstate

新建store文件夹来统一进行状态管理，接着按模块功能分类，创建login.ts文件

import { defineStore } from 'pinia'







export const useStore = defineStore('login', {

  // other options...
})

最后，在页面中引入该文件进行使用

web-localstorage-plus

使用命名空间来进行模块划分，此处，我们创建一个为login的命名空间

import { useStorage } from 'web-localstorage-plus'






const storage = useStorage()



// 参数三指定命名空间

storage.setItem('name','spp','login')

使用的话，就直接通过getItem进行获取

总结

pinia-plugin-persistedstate依附pinia实现模块管理，而web-localstorage-plus使用namespace来实现，这一点二者不分伯仲

持久化粒度控制

pinia-plugin-persistedstate

为defineStore设置persist即可指定字段进行持久缓存，反过来说，不指定的内容将会在页面刷新后被删除

import { defineStore } from 'pinia'







export const useStore = defineStore('login', {

  ...

  persist: {

    {
      paths: ['some key'],
      storage: localStorage,
    },
  },
})

web-localstorage-plus

本身就是持久化存储，想要实现和pinia-plugin-persistedstate类似的功能，可以借助其clear接口的进阶用法，传递一个排除项

import { useStorage } from 'web-localstorage-plus'






const storage = useStorage()



// 参数三指定命名空间

storage.clear(['somekey'],true)

总结

本次我们分析了对持久化数据的控制，前者默认是持久化的，如果想要细粒度控制，需要显示的指定对应的key，后者默认就是持久化的，配合clear接口也可以达到同样的能力

客制化

pinia-plugin-persistedstate

它提供了afterRestore、serializer等来定制化能力

import { defineStore } from 'pinia'







export defineStore('store', {
  ...

  persist: {

    beforeRestore: (ctx) => {
      // 在恢复数据之前执行一些客制化逻辑
    },
  },
})

web-localstorage-plus

它提供use接口来定制化能力

function userPlugin(payload){
    const { key, wark, value, namespace, ctx } = params;
    if(wark === 'setItem'){
        // 当work发生时执行一些客制化逻辑
    }
    return value
}
storage.use(userPlugin)