Pinia+Router学习笔记(五)

简介: 本节记录例API和Pinia持久化插件相关内容

例API存在于通过pinia导出的函数调用后的返回值中,主要有以下几种:

$reset 重置store到其初始状态
$subscribe 当state中的数据发生变化时调用,接收一个回调函数,其中有args和state两个参数
$onAction 当actions被调用时会执行这个函数,接收一个回调函数,有一个args参数

Pinia持久化插件:

import { createApp,toRaw } from 'vue'
// import './style.css'
import App from './App.vue'
// import ElementPlus from 'element-plus'
// import 'element-plus/dist/index.css'
// import './css/index.css'
import { createPinia, PiniaPluginContext } from 'pinia'

export const app = createApp(App)

// app.use(ElementPlus)

type Options = {
    key?: string
}

// 定义兜底变量,如果用户没有传key则默认key为'xiaoman'
const __piniaKey__: string = 'xiaoman'

// 在localsession中存储键值对
const setStorage = (key: string, value: any) => {
    localStorage.setItem(key, JSON.stringify(value))
}

// 定义取内容的函数
const getData = (key:string) => {
    return localStorage.getItem(key) ? JSON.parse(localStorage.getItem(key) as string) : {}
}

// 利用函数柯里化使key能够被传入
const piniaPlugin = (option: Options) => {
    return (context: PiniaPluginContext) => {
        const { store } = context
        // 将数据取出并返回给state,使页面上的内容发生变化(store.$id是每个store的唯一标识符)
        const data = getData(`${option?.key ?? __piniaKey__}-${store.$id}`)
        store.$subscribe(() => {
            // 由于store.$state是一个proxy对象,因此通过toRaw使其成为一个原始对象
      // 如果没有传入key则默认为兜底变量xiaoman(??是空置合并运算符)
            setStorage(`${option?.key ?? __piniaKey__}-${store.$id}`, toRaw(store.$state))
        })
        return {
            ...data
        }
    }
}

const store = createPinia()

store.use(
    piniaPlugin({
        key: 'pinia',
    })
)

app.use(store)

app.mount('#app')

至此,pinia完结

相关文章
HashMap,你是怎么做到的Key重复?
HashMap,你是怎么做到的Key重复?
|
Windows Linux
fedora10 wine 使用windows软件
      通过wine实现在linux下运行windows下的exe文件,以上是dyli在fedora10里面配置的全程记录!   1 wine下载与安装   [root@localhost thread_create]# yum install wine 载入插...
1035 0
|
9天前
|
存储 关系型数据库 分布式数据库
PostgreSQL 18 发布,快来 PolarDB 尝鲜!
PostgreSQL 18 发布,PolarDB for PostgreSQL 全面兼容。新版本支持异步I/O、UUIDv7、虚拟生成列、逻辑复制增强及OAuth认证,显著提升性能与安全。PolarDB-PG 18 支持存算分离架构,融合海量弹性存储与极致计算性能,搭配丰富插件生态,为企业提供高效、稳定、灵活的云数据库解决方案,助力企业数字化转型如虎添翼!
|
8天前
|
存储 人工智能 Java
AI 超级智能体全栈项目阶段二:Prompt 优化技巧与学术分析 AI 应用开发实现上下文联系多轮对话
本文讲解 Prompt 基本概念与 10 个优化技巧,结合学术分析 AI 应用的需求分析、设计方案,介绍 Spring AI 中 ChatClient 及 Advisors 的使用。
366 130
AI 超级智能体全栈项目阶段二:Prompt 优化技巧与学术分析 AI 应用开发实现上下文联系多轮对话
|
8天前
|
人工智能 Java API
AI 超级智能体全栈项目阶段一:AI大模型概述、选型、项目初始化以及基于阿里云灵积模型 Qwen-Plus实现模型接入四种方式(SDK/HTTP/SpringAI/langchain4j)
本文介绍AI大模型的核心概念、分类及开发者学习路径,重点讲解如何选择与接入大模型。项目基于Spring Boot,使用阿里云灵积模型(Qwen-Plus),对比SDK、HTTP、Spring AI和LangChain4j四种接入方式,助力开发者高效构建AI应用。
356 122
AI 超级智能体全栈项目阶段一:AI大模型概述、选型、项目初始化以及基于阿里云灵积模型 Qwen-Plus实现模型接入四种方式(SDK/HTTP/SpringAI/langchain4j)
|
20天前
|
弹性计算 关系型数据库 微服务
基于 Docker 与 Kubernetes(K3s)的微服务:阿里云生产环境扩容实践
在微服务架构中,如何实现“稳定扩容”与“成本可控”是企业面临的核心挑战。本文结合 Python FastAPI 微服务实战,详解如何基于阿里云基础设施,利用 Docker 封装服务、K3s 实现容器编排,构建生产级微服务架构。内容涵盖容器构建、集群部署、自动扩缩容、可观测性等关键环节,适配阿里云资源特性与服务生态,助力企业打造低成本、高可靠、易扩展的微服务解决方案。
1340 8
|
2天前
|
存储 JSON 安全
加密和解密函数的具体实现代码
加密和解密函数的具体实现代码
190 136
|
7天前
|
监控 JavaScript Java
基于大模型技术的反欺诈知识问答系统
随着互联网与金融科技发展,网络欺诈频发,构建高效反欺诈平台成为迫切需求。本文基于Java、Vue.js、Spring Boot与MySQL技术,设计实现集欺诈识别、宣传教育、用户互动于一体的反欺诈系统,提升公众防范意识,助力企业合规与用户权益保护。