前言

尤雨溪在 3 月 24 日晚与掘金合作的直播链接中提到，pinia 就是实际上的 vuex5，作为新一代的状态管理器，更友好的 ts 支持，更轻量的打包体积，更简化的模块管理，无疑会在将来的市场中备受欢迎。

pinia 的优点相比也不用多说了，但也正是由于其处于一个新生的阶段，周边生态还不够完善，在本人搭建项目的过程中便遇到了 pinia 在 uniapp 中数据持久化的问题。

市场上目前也有一些数据持久化的插件，例如 vuex-persistedstate，pinia-plugin-persist,但是服务于 pinia 和 uniapp 的却没有，其中pinia-plugin-persist虽然同样可以满足需求，但是由于其默认数据持久化的方式是 sessionStorage，使用时需要重复的配置，作为一个有手的程序员，当然不能忍，于是便有了pinia-plugin-persist-uni。

使用说明

安装

npm i pinia-plugin-persist-uni

配置

Vue2

import Vue from 'vue'
import vueCompositionApi from '@vue/composition-api'
import { createPinia } from 'pinia'
import piniaPersist from 'pinia-plugin-persist-uni'
import App from './App.vue'

const pinia = createPinia()
pinia.use(piniaPersist)

Vue.use(vueCompositionApi)
Vue.use(pinia)

new Vue({
  pinia,
  render: (h) => h(App),
}).$mount('#app')

Vue3

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import piniaPersist from 'pinia-plugin-persist-uni'

const pinia = createPinia()
pinia.use(piniaPersist)

createApp({}).use(pinia).mount('#app')

Typescript

// tsconfig.json
{
  "compilerOptions": {
    "types": ["pinia-plugin-persist-uni"]
  }
}

基本用法

通过在你的 stroe 中配置 persist, 将会通过 uniStorage 来持久化存储你的数据.

请配置 id，用于持久化存储时的 key。

// store/user.ts
import { defineStore } from 'pinia'

export const useUserStore = defineStore('storeUser', {
  state: () => {
    id: 'user',
    return {
      firstName: 'allen',
      lastName: 'ttk',
      accessToken: 'xxxxxxxxxxxxx',
    }
  },
  actions: {
    setToken(value: string) {
      this.accessToken = value
    },
  },
  persist: {
    enabled: true,
  },
})

总结

新技术会带给我们更良好的开发体验，但是我们同样应该关注其社区环境，并力所能及的贡献出自己的一份力量。本插件开发的新路历程也是基于目前pinia的生态环境中没有专门服务于uniapp的数据持久化插件。

该项目也是参考了vuex-persistedstate和pinia-plugin-persist,保持了使用习惯的同时又简化了使用配置。同时在搭建项目的过程中也接触到了github pages以及github actions的配置使用，实现了说明文档自动部署和 npm 自动发包，可谓是收获满满。

目前源码已发布至 github,详情见源码地址说明文档使用案例，对你有帮助或者喜欢的话请点个 Star。

更新

uniStorage在H5中的存储方式会被映射为localStorage 官方文档，而评论区中有小伙伴提到希望支持sessionStorage，考虑到这也是一个非常合理的需求，所以就用喝杯咖啡的时间对之前的设计完善了一下。

更新后在H5端的默认存储方式会变更为sessionStorage（和市面上大多数一样），当然你也可以通过H5Storage参数以及strategies参数来进行配置，支持一部分使用sessionStorage而另一部分使用localStorage,一切都可以按照你的喜好和业务场景来灵活设置。

如果小伙伴们有其他的建议或想法也可以在评论区中指出，欢迎讨论 :)

说明文档

参考

FAQ

鉴于评论区很多小伙伴询问关于切换页面时持久化失效的问题，在这里进行统一回复一下：

所有pinia相关的数据持久化插件都是基于官方暴露出的subscribe，它可以为我们创建一个状态订阅，这样我们就可以在store更改时自动更新缓存达到持久化存储的目的。而官方在subscribe的实现中做了一个特殊的优化，状态订阅会被绑定到添加它们的组件，而这个组件被卸载时，订阅也将被自动删除，这也就是为什么有时候我们会遇到持久化存储不生效的原因。

那么如何解决呢？pinia官方也考虑到了这一点，因此暴露出了一个detached选项，创建订阅时将它设置为true，就会将状态订阅与当前组件分离，即组件被卸载订阅依然会保留。

我已经为pinia-plugin-persist创建了相关的pr,不过作者好像最近没有维护这个项目，暂时还未被合并，不过有问题的小伙伴也可以使用本插件来替代，然后在使用时配置项里添加detached: true即可。


    persist: {
        enabled: true,
        detached: true, // 设置订阅与组件分离
    },

pinia-plugin-persist-uni 在uni-app中持久化存储pinia

前言

使用说明

安装

配置

Vue2

Vue3

Typescript

基本用法

总结

更新

参考

FAQ