likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 19

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

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)

总结

两者都可以实现自己的特定需求

影响力

pinia-plugin-persistedstate

在github有1.2k+的star数

web-localstorage-plus

在github只有19个star

总结

前者是pinia中作为存储方案的不二选择，后者star数较少，需谨慎使用

后言

本文从多个角度分析对比了两个npm包在持久化数据这一维度上的差异，由于pinia-plugin-persistedstate背靠pinia，已经事实上成为不二选择

尽管web-localstorage-plus是作者本人开发的，但是在使用了pinia的情况下，我仍然建议你使用pinia-plugin-persistedstate。不过，如果你项目中避无可避要大量使用localstorage，我想web-localstorage-plus会是你的一个不错的选择

下一篇，我们一起来开发pinia的插件，尝试将web-localstorage-plus改造为可支持pinia的版本

如果本文对您有用，希望能得到您的点赞和收藏

订阅专栏，每周更新2-3篇类型体操，每月1-3篇vue3源码解析，等你哟😎