Plug-in de cache local global uniapp+pinia PiniaPluginUnistorage

Recentemente estou desenvolvendo uniapp+vue3+pinia. O projeto precisa usar a função de cache local. O uni.setStorage e outros métodos fornecidos oficialmente pelo uniapp não podem responder dinamicamente. Então encontrei o plug-in pinia-plugin-unistorage que suporta cache de persistência local dinâmica uniapp pinia.

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

O plug-in de cache local usado no projeto anterior desenvolvido com base em vite4.x vue3 pinia é pinia-plugin-persistedstate.

Este plugin é a versão uniapp de pinia-plugin-persistedstate .

Compatibilidade de plataforma

Atualmente compatível com vue2/3，APP/小程序/H5outras plataformas.

Instalar

• projeto uniapp criado por cli

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 返回
    }
}

• O projeto uniapp criado por hbuilderx
  introduz diretamente o registro após a instalação no mercado de plug-ins.

// 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 返回
    }
}

Rápido de usar

import {
    
     defineStore } from 'pinia'

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

vue3 setupClaro, a sintaxe também é suportada .

import {
    
     defineStore } from 'pinia'

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

No momento, o plug-in não parece suportar sessionStorage. Se acontecer de você precisar dele em seu projeto, você pode querer dar uma olhada.

Os amigos também podem acompanhar minha conta pública acima, onde compartilharei regularmente alguns conhecimentos técnicos de front-end e casos práticos de projetos.