一、前言

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')

ts

{ "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,
  },
})

vue2和vue3持久化存储pinia