pinia-plugin-persist-taro

前言

基于京东小程序框架 Taro 的 pinia 的持久化插件，此插件适配了 Taro 框架，基于 pinia-plugin-persist-uni做了简单修改

使用说明

安装

npm i pinia-plugin-persist-taro

配置

Vue2

import Vue from 'vue'
import vueCompositionApi from '@vue/composition-api'
import { createPinia } from 'pinia'
import piniaPersist from 'pinia-plugin-persist-taro'
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-taro'

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

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

Typescript

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

基本用法

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

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

// storage.ts
import { setStorageSync, getStorageSync } from '@tarojs/taro'

export default {
  setItem: (key: string, data: any) => {
    setStorageSync(key, data)
  },
  getItem: (key: string) => {
    return getStorageSync(key)
  },
}

// store/user.ts
import { defineStore } from 'pinia'
// 引入缓存
import storage from "./storage";

export const useUserStore = defineStore('storeUser', {
  state: () => {
    id: 'user',
    return {
      firstName: 'allen',
      lastName: 'ttk',
      accessToken: 'xxxxxxxxxxxxx',
    }
  },
  actions: {
    setToken(value: string) {
      this.accessToken = value
    },
  },
  persist: {
    //这里存储默认使用的是session
    enabled: true,
    // 开启自定义缓存
    enforceCustomStorage: true,
    strategies: [
      {
        // 传入自定义的缓存
        storage: storage as Storage,
        //key的名称
        key: "mini-user-data",
        // 可以选择哪些进入local存储，这样就不用全部都进去存储了
        // 默认是全部进去存储
        paths: ["firstName"],
      },
    ],
  },
})

总结

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

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

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

参考

• pinia-plugin-persist-uni
• vuex-persistedstate
• pinia-plugin-persist