最近在做uniapp+vue3+pinia开发，项目中需要使用本地缓存功能，无赖uniapp官方提供的uni.setStorage等方法没法动态响应。于是就找到了支持uniapp pinia动态本地持久化缓存插件pinia-plugin-unistorage。

https://github.com/dishait/pinia-plugin-unistorage

之前基于vite4.x vue3 pinia开发的项目使用的本地缓存插件是pinia-plugin-persistedstate。

该插件是 pinia-plugin-persistedstate 的 uniapp 版本。

平台兼容性

目前已经兼容 vue2/3，APP/小程序/H5 等平台。

安装

• cli创建的uniapp项目

yarn add pinia-plugin-unistorage -D
// 或者
npm i pinia-plugin-unistorage -D

// main.js
import { createSSRApp } from 'vue'
import * as Pinia from 'pinia'
import { createUnistorage } from 'pinia-plugin-unistorage'

export function createApp() {
    const app = createSSRApp(App)

    const store = Pinia.createPinia()

    // 关键代码
    store.use(createUnistorage())

    app.use(store)

    return {
        app,
        Pinia // 此处必须将 Pinia 返回
    }
}

• hbuilderx创建的uniapp项目
  直接插件市场安装后引入注册

// main.js
import { createSSRApp } from 'vue'
import * as Pinia from 'pinia'
import { createUnistorage } from './uni_modules/pinia-plugin-unistorage'

export function createApp() {
    const app = createSSRApp(App)

    const store = Pinia.createPinia()

    // 关键代码
    store.use(createUnistorage())

    app.use(store)

    return {
        app,
        Pinia // 此处必须将 Pinia 返回
    }
}

快速使用

import { defineStore } from 'pinia'

export const useStore = defineStore('main', {
    state() {
        return {
            someState: 'hello pinia'
        }
    },
    unistorage: true // 开启后对 state 的数据读写都将持久化
})

当然也是支持 vue3 setup 语法。

import { defineStore } from 'pinia'

export const useStore = defineStore(
    'main',
    () => {
        const someState = ref('hello pinia')
        return { someState }
    },
    {
        unistorage: true // 开启后对 state 的数据读写都将持久化
    }
)

目前该插件貌似不支持sessionStorage，如果大家在项目中刚好有需要不妨去看看。

小伙伴们也可以关注我的上面公众号，会定期分享一些前端技术知识和项目实战案例。