vue3学习(十五)--- Pinia状态管理器

文章目录

  • 安装引入
  • 初始化仓库Store
  • 页面使用
  • state
    • 1. 直接修改state
    • 2. 批量修改State的值 $patch对象形式
    • 3. 批量修改State的值 $patch函数形式
    • 4. 通过actions修改 使用方法直接在实例调用
    • 解构store
  • getters
  • actions 同步和异步
    • 同步
    • 异步
  • 常见API
    • $reset()
    • $subscribe
    • $onAction
  • pinia插件
    • pinia持久化工具pinia-plugin-persist

Pinia官网地址点这里

Pinia.js 有如下特点:

  1. 完整的 ts 的支持;
  2. 足够轻量,压缩后的体积只有1kb左右;
  3. 去除 mutations,只有 state,getters,actions
  4. actions 支持同步和异步;
  5. 代码扁平化没有模块嵌套,只有 store 的概念,store 之间可以自由使用,每一个store都是独立的
  6. 无需手动添加 storestore 一旦创建便会自动添加;
  7. 支持Vue3Vue2

安装引入

cnpm install pinia -S
import { createApp } from 'vue'
import App from './App.vue'
import {createPinia} from 'pinia'const store = createPinia()
let app = createApp(App)app.use(store)app.mount('#app')

这样就引入成功了,状态管理器使用要单独配置store/index.ts文件。然后在用到的页面中引入
import {useTestStore} from './store',注意:引入和使用是分开的

初始化仓库Store

  1. 创建文件store/index.ts
  2. 定义仓库Store
import { defineStore } from 'pinia'export const useTestStore = defineStore('test', {state:()=>{return{current:1}},getters:{},actions:{}
})
  • 使用defineStore定义仓库,传唯一id。变量名称命名为use…是可组合项之间的约定,以使其使用习惯。
    • 唯一的id。类似于vue2module模块的功能,这样更加的方便。
  • State 箭头函数 返回一个对象 在对象里面定义值
  • getters类似计算属性
  • actions里面可以定义同步和异步

页面使用

引入对应的store名称useTestStore,然后执行useTestStore()

<template><div><button @click="Add">+</button><div>{{Test.current}}</div></div>
</template><script setup lang='ts'>
import {useTestStore} from './store'
const Test = useTestStore()
const Add = () => {Test.current++
}</script><style></style>

state

1. 直接修改state

// 直接修改state
const editState = ()=>{TestStore.current++
}

2. 批量修改State的值 $patch对象形式

const editState2 = ()=>{TestStore.$patch({current:200,name:300})
}

3. 批量修改State的值 $patch函数形式

函数默认state参数,传递给 $patch() 的函数必须是同步的。

推荐使用函数形式 可以自定义修改逻辑比如if判断

const editState3 = ()=>{TestStore.$patch((state)=>{state.current = 300state.name = 300})
}

4. 通过actions修改 使用方法直接在实例调用

const editState4 = ()=>{TestStore.setCurrent()
}
// pinia没有mutation 只有actions 同步异步都在这里处理actions: {// 同步setCurrent() {console.log('this', this)this.current++}}

解构store

Pinia不允许直接解构是会失去响应性的

const Test = useTestStore()const { current, name } = Testconsole.log(current, name);

这种是不具有响应式的

要想得到响应式效果需要使用pinia自带的storeToRefs

import { storeToRefs } from 'pinia'const Test = useTestStore()const { current, name } = storeToRefs(Test)

其原理跟toRefs 一样的给里面的数据包裹一层toref。

源码通过toRaw使store变回原始数据防止重复代理。循环store 通过 isRef isReactive 判断 如果是响应式对象直接拷贝一份给refs 对象 将其原始对象包裹toRef 使其变为响应式对象


getters

主要作用类似于computed 数据修饰并且有缓存

getters: {terCurrent(): string {return `getters:普通调用可以使用this访问属性--------${this.current}`},terCurrent2: (state) => {return `getters:箭头函数无法使用this 需要使用getters默认第一个参数state访问---- ${state.current}`},},

普通函数形式可以使用this,箭头函数不能使用this,可以使用state参数


actions 同步和异步

同步

同步直接调用即可

const editState4 = ()=>{TestStore.setCurrent()
}
// pinia没有mutation 只有actions 同步异步都在这里处理actions: {// 同步setCurrent() {console.log('this', this)this.current++}}

异步

异步 可以结合async await 修饰

import { defineStore } from 'pinia'
import { Names } from './store-naspace'type Result = {name: stringisChu: boolean
}const Login = (): Promise<Result> => {return new Promise((resolve) => {setTimeout(() => {resolve({name: '4444',isChu: true})}, 3000)})
}export const useTestStore = defineStore('test' {state: () => ({user: <Result>{},name: "123"}),actions: {async getLoginInfo() {const result = await Login()this.user = result;}},
})
<template><div><button @click="Add">test</button><div>{{Test.user}}</div>    </div>
</template><script setup lang='ts'>
import {useTestStore} from './store'
const Test = useTestStore()
const Add = () => {Test.getLoginInfo()
}</script><style></style>

常见API

$reset()

重置store到它的初始状态

const resetFn=()=>{TestStore.$reset()
}

$subscribe

订阅state的改变,只要有state 的变化就会走这个函数

Test.$subscribe((args,state)=>{console.log(args,state);
})

$onAction

订阅Actions的改变,只要有actions被调用就会走这个函数

Test.$onAction((args)=>{console.log(args);
})

pinia插件

pinia和vuex一样,一旦刷新页面就会数据丢失。

一般会设计一个插件,将state缓存起来。

const __piniaKey = '__PINIAKEY__'
//定义兜底变量type Options = {key?:string
}
//定义入参类型//将数据存在本地
const setStorage = (key: string, value: any): void => {localStorage.setItem(key, JSON.stringify(value))}//存缓存中读取
const getStorage = (key: string) => {return (localStorage.getItem(key) ? JSON.parse(localStorage.getItem(key) as string) : {})}//利用函数柯丽华接受用户入参
const piniaPlugin = (options: Options) => {//将函数返回给pinia  让pinia  调用 注入 context
return (context: PiniaPluginContext) => {const { store } = context;const data = getStorage(`${options?.key ?? __piniaKey}-${store.$id}`)store.$subscribe(() => {setStorage(`${options?.key ?? __piniaKey}-${store.$id}`, toRaw(store.$state));})//返回值覆盖pinia 原始值
return {...data}}}//初始化pinia
const pinia = createPinia()//注册pinia 插件
pinia.use(piniaPlugin({key: "pinia"}))

pinia持久化工具pinia-plugin-persist

安装

npm i pinia-plugin-persist --save

引入

main.ts// 引入状态管理器
import { createPinia } from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist'// pinia添加数据持久化插件
const pinia = createPinia()
pinia.use(piniaPluginPersist)app.use(pinia)

ts声明文件

在根目录创建types文件夹存放类似这种没有声明文件的情况。创建pinia-plugin-persist.d.ts文件(ts会全局检查.d.ts文件)

declare module 'pinia-plugin-persist'
import { defineStore } from 'pinia'export const Store = defineStore('comStore', {// 类似于Vue2组件中的data,用于存储全局状态数据,但有两个要求// 1. 必须是函数,目的是为了在服务端渲染的时候避免交叉请求导致的数据状态污染// 2. 必须是箭头函数,这样是为了更好的 TS 类型推导state: () => {return {}},getters: {},actions: {},persist: {enabled: true, // true 表示开启持久化保存strategies: [{key: 'user', //设置缓存名称storage: sessionStorage, //设置缓存方式paths: ['userInfo'], //设置需要缓存的对象},],},
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/125160.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python 打印与去除不可见字符 \x00

# 此处不是真实的\x00 被 空格替换了 text "boot_1__normal/ " print(text.strip()"boot_1__normal/") # 打印不可见字符 print(repr(text))>>> False boot_1__normal/\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x0…

​如何选择更快更稳定的存储服务器​

如何选择更快更稳定的存储服务器 选择更快、更稳定的存储服务器需要考虑以下几个方面&#xff1a; 存储介质&#xff1a;存储服务器的主要存储介质包括固态硬盘和机械硬盘。相比于机械硬盘&#xff0c;固态硬盘具有更高的读写速度和更低的延迟&#xff0c;因此能够提供更快的数…

Python爬虫程序中的504错误:原因、常见场景和解决方法

概述 在编写Python爬虫程序时&#xff0c;我们经常会遇到各种错误和异常。其中&#xff0c;504错误是一种常见的网络错误&#xff0c;它表示网关超时。是指客户端与服务器之间的网关通信过程中&#xff0c;服务器在规定的时间内没有返回响应&#xff0c;导致请求超时。此类错误…

Windows键 + Shift + S 截图图片保存位置

地址 C:\Users\Administrator\AppData\Local\Packages\MicrosoftWindows.Client.CBS_cw5n1h2txyewy\TempState\ScreenClip

opencv+yolov8实现监控画面报警功能

项目背景 最近停在门前的车被人开走了&#xff0c;虽然有监控&#xff0c;但是看监控太麻烦了&#xff0c;于是想着框选一个区域用yolov8直接检测闯入到这个区域的所有目标&#xff0c;这样1ms一帧&#xff0c;很快就可以跑完一天的视频 用到的技术 COpenCVYolov8 OnnxRunt…

reactos 可调试光盘映像

链接&#xff1a;https://pan.baidu.com/s/13M9BZN4IDrWLc3bjnHO79g?pwd0gst 提取码&#xff1a;0gst

Kotlin apply和with用法和区别

apply apply 是 Kotlin 标准库中的一个函数&#xff0c;它允许你在对象上执行一系列操作&#xff0c;然后返回该对象自身。它的语法结构如下&#xff1a; fun <T> T.apply(block: T.() -> Unit): T这个函数接受一个 lambda 表达式作为参数&#xff0c;该 lambda 表达…

C语言每日一题(22)合并两个有序数组

力扣网 88. 合并两个有序数组 题目描述 给你两个按 非递减顺序 排列的整数数组 nums1 和 nums2&#xff0c;另有两个整数 m 和 n &#xff0c;分别表示 nums1 和 nums2 中的元素数目。 请你 合并 nums2 到 nums1 中&#xff0c;使合并后的数组同样按 非递减顺序 排列。 注意…

如何解决缓存击穿?

缓存击穿是指针对热门数据的缓存&#xff0c;由于并发访问&#xff0c;缓存失效的瞬间&#xff0c;大量请求直接穿透缓存&#xff0c;直接访问数据库&#xff0c;导致数据库压力骤增的情况。以下是一些解决缓存击穿问题的方法&#xff1a; 添加互斥锁&#xff08;Mutex&#x…

多点开花。泛癌+单细胞+免疫+实验,一套组合拳教你拿下11+

今天给同学们分享一篇生信文章“A pan-cancer analysis shows immunoevasive characteristics in NRF2 hyperactive squamous malignancies”&#xff0c;这篇文章于2023年2月27日发表在Redox Biol期刊上&#xff0c;影响因子为11.4。 NRF2通路在各种癌症类型中经常被激活&…

Nor Flash和Nand Flash的区别——笔记

NorFlash&#xff1a;串行存储器、读取速度比较快&#xff08;比NandFlash快&#xff09;&#xff0c;适合用于存储程序代码和执行代码&#xff0c;但NorFlash写入速度比较慢、容量比较小。数据线和地址线是分开的。 NandFlash&#xff1a;并行存储器、写入速度比较快&#xf…

FlinkCDC系列:通过skipped.operations参数选择性处理新增、更新、删除数据

在flinkCDC源数据配置&#xff0c;通过debezium.skipped.operations参数控制&#xff0c;配置需要过滤的 oplog 操作。操作包括 c 表示插入&#xff0c;u 表示更新&#xff0c;d 表示删除。默认情况下&#xff0c;不跳过任何操作&#xff0c;以逗号分隔。配置多个操作&#xff…

【23真题】邮电之首!扩招15倍!专业课难度骤降!

今天分享的是23年北京邮电大学804的信号与系统试题及解析。 本套试卷难度分析&#xff1a;北邮804在22年只招生6人&#xff0c;23年拟招生87人&#xff0c;扩招近15倍&#xff01;22年北京邮电大学804考研真题&#xff0c;我也发布过&#xff0c;若有需要&#xff0c;戳这里自…

统计特殊四元组

题记&#xff1a; 给你一个 下标从 0 开始 的整数数组 nums &#xff0c;返回满足下述条件的 不同 四元组 (a, b, c, d) 的 数目 &#xff1a; nums[a] nums[b] nums[c] nums[d] &#xff0c;且a < b < c < d 示例 1&#xff1a; 输入&#xff1a; nums [1,2,3…

4.2 SSAO算法 屏幕空间环境光遮蔽

一、SSAO介绍 AO 环境光遮蔽&#xff0c;全程Ambient Occlustion&#xff0c;是计算机图形学中的一种着色和渲染技术&#xff0c;模拟光线到达物体能力的粗略的全局方法&#xff0c;描述光线到达物体表面的能力。 SSAO 屏幕空间环境光遮蔽&#xff0c;全程 Screen Space Amb…

Spring - Spring底层核心原理解析

Spring的底层有一个整体的大致了解 1. Bean的生命周期底层原理 2. 依赖注入底层原理 3. 初始化底层原理 4. 推断构造方法底层原理 5. AOP底层原理 6. Spring事务底层原理 ClassPathXmlApplicationContext context new ClassPathXmlApplicationContext("spring.xml&q…

二十三种设计模式全面解析-原型模式进阶之原型管理器:集中管理对象原型的设计模式之道

在软件开发中&#xff0c;我们经常需要创建和复制对象。然而&#xff0c;有时候直接创建对象可能会导致性能下降或代码重复。为了解决这些问题&#xff0c;原型模式应运而生。而使用原型管理器&#xff08;Prototype Manager&#xff09;来集中管理原型对象可以进一步提高灵活性…

20.2 OpenSSL 非对称RSA加解密算法

RSA算法是一种非对称加密算法&#xff0c;由三位数学家Rivest、Shamir和Adleman共同发明&#xff0c;以他们三人的名字首字母命名。RSA算法的安全性基于大数分解问题&#xff0c;即对于一个非常大的合数&#xff0c;将其分解为两个质数的乘积是非常困难的。 RSA算法是一种常用…

MySQL CHAR 和 VARCHAR 的区别

文章目录 1.区别1.1 存储方式不同1.2 最大长度不同1.3 尾随空格处理方式不同1.4 读写效率不同 2.小结参考文献 在 MySQL 中&#xff0c;CHAR 和 VARCHAR 是两种不同的文本数据类型&#xff0c;CHAR 和 VARCHAR 类型声明时需要指定一个长度&#xff0c;该长度指示您希望存储的最…

我的架构复盘

1、背景 我目前公司研发中心担任软件研发负责人&#xff0c;研发中心分为3组&#xff0c;总共有30多人。研发中心主要开发各类生产辅助工具&#xff0c;比如巡检、安全教育等系统。系统不对外&#xff0c;只在公司内部使用。 就我个人来说&#xff0c;作为研发负责人&#xf…