pinia-plugin-persist-uni

前言

尤雨溪在 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

1import Vue from 'vue'
2import vueCompositionApi from '@vue/composition-api'
3import { createPinia } from 'pinia'
4import piniaPersist from 'pinia-plugin-persist-uni'
5import App from './App.vue'
6
7const pinia = createPinia()
8pinia.use(piniaPersist)
9
10Vue.use(vueCompositionApi)
11Vue.use(pinia)
12
13new Vue({
14  pinia,
15  render: (h) => h(App),
16}).$mount('#app')

Vue3

1import { createApp } from 'vue'
2import { createPinia } from 'pinia'
3import piniaPersist from 'pinia-plugin-persist-uni'
4
5const pinia = createPinia()
6pinia.use(piniaPersist)
7
8createApp({}).use(pinia).mount('#app')

Typescript

1// tsconfig.json
2{
3  "compilerOptions": {
4    "types": ["pinia-plugin-persist-uni"]
5  }
6}

基本用法

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

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

1// store/user.ts
2import { defineStore } from 'pinia'
3
4export const useUserStore = defineStore('storeUser', {
5  state: () => {
6    id: 'user',
7    return {
8      firstName: 'allen',
9      lastName: 'ttk',
10      accessToken: 'xxxxxxxxxxxxx',
11    }
12  },
13  actions: {
14    setToken(value: string) {
15      this.accessToken = value
16    },
17  },
18  persist: {
19    enabled: true,
20  },
21})

总结

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

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

相关内容

• 掘金文章
• 说明文档
• 使用案例

对你有帮助或者喜欢的话请点个 Star。

参考

• vuex-persistedstate
• pinia-plugin-persist