前端系列-8 集中式状态管理工具pinia

集中式状态管理工具—pinia

vue3中使用pinia作为集中式状态管理工具,替代vue2中的vuex。

pinia文档可参考: https://pinia.web3doc.top/introduction.html

1.项目集成pinia

安装pinia依赖:

npm install pinia

在main.ts中引入pinia

import { createApp } from 'vue'
import App from './App.vue'// 从pinia库引入createPinia方法
import { createPinia } from 'pinia'//调用createPinia方法创建pinia对象,设置到APP中
createApp(App).use(createPinia()).mount('#app')

2.定义store

pina提供了defineStore方法创建store,store作为集中式状态管理的实体,可被任意组件读取/写入数据。定义的store一般放在src/stores目录下。

import {defineStore} from 'pinia'// 定义并暴露一个store
export const useXXXStore = defineStore('XXX', {// 配置信息
})

defineStore方法接收两个参数,store的唯一标识符和store的配置对象。其中,store配置对象中可以包含 state函数、actions对象、getters对象。
state中可以定义状态信息,getters基于state定义计算属性,actions中定义state相关的操作方法。以下结合案例进行说明:

// src/stores/clock.tsimport { defineStore } from 'pinia'export const useClockStore = defineStore('clock', {state: () => {return { hourHand: 0,minuteHand: 0,secondHand: 0}},getters:{time() {return this.hourHand +"时: "+this.minuteHand +"分: "+this.secondHand +"秒";}},actions: {increHour() {this.hourHand++;},getTime() {return this.time;}},
})

state中包含3个状态属性:hourHand和minuteHand和secondHand,初始值和默认值为0;
getters中定义了一个获取时间的方法time():根据状态值计算出时间信息;
actions中定义了一个修改状态变量的方法和一个获取计算属性的方法。

3.使用store

在任意组件中,可以引入和使用章节2中定义的store,方式如下:

import { useClockStore } from '@/stores/clock'
const clockStore = useClockStore()

得到clockStore这个store后,可以直接在template或者script脚本中通过属性名获取state的属性(含计算属性):

clockStore.time
clockStore.hourHand
clockStore.minuteHand
clockStore.secondHand

也可以调用store在actions中定义的方法:

clockStore.increHour()
clockStore.getTime()

使用章节2中定义的clock.ts完整的案例组件如下所示:

<template>
<div><p><span>{{clockStore.hourHand}}</span><span>:</span><span>{{clockStore.minuteHand}}</span><span>:</span><span>{{clockStore.secondHand}}</span></p><button @click="addHour">addHourBtn</button><button @click="showTime">showTimeBtn</button></div>
</template><script lang="ts" setup>import { useClockStore } from "@/stores/clock.ts";const clockStore = useClockStore();function addHour() {clockStore.increHour();}function showTime() {alert(clockStore.time);}
</script>

此时,clockStore中的状态属性和计算属性作为响应式数据。
除了上述通过store中actions定义的方法外,还可通过以下方式直接修改状态值:

clockStore.hourHand=12// 批量修改
clockStore.$patch({hourHand:12,minuteHand:30,secondHand:0
})

4.响应式状态提取

章节3中提到过clockStore对象的状态属性和计算属性作为响应式数据,且可以直接操作clockStore对象的属性。
但是如果将其进行提取,则会失去响应式:

// clockStore.hourHand为响应式,修改为12后,页面会发生变化
clockStore.hourHand=12// hour不是响应式对象
let hour = clockStore.hourHand

可以通过pinia的storeToRefs为其提供了一个解决方案:

import { storeToRefs } from 'pinia'// 根据状态名称进行提取
const {hourHand, minuteHand,secondHand} = storeToRefs(clockStore)
hourHand.value = hourHand.value +100;

此时,可以在template结构中直接使用hourHand, minuteHand,secondHand,而不需要再使用clockStore.hourHand, clockStore.minuteHand,clockStore.secondHand.
解析出的数据为ObjectRefImpl类型,因此在script脚本中,修改和获取值时需要使用.value进行值的提取。

5.订阅store状态变化

可以通过store对象的$subscribe方法监听状态的变化,使用如下所示:

import { useClockStore } from "@/stores/clock.ts";
const clockStore = useClockStore();clockStore.$subscribe((mutate, state)=>{// 定制操作console.log(mutate)console.log(state)
})

mutate中包含了发生变化的属性key以及变化前后的值;state为更新后的状态对象。
mutate参数打印信息如下:

{storeId: "clockStore", type: "direct", events:{key: "hourHand", oldValue: 0, newValue: 1}}

state参数打印信息如下:

Proxy {hourHand: 1, minuteHand: 0, secondHand: 0}

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

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

相关文章

Facebook和Instagram运营中的注意事项和QA

Facebook注意事项 1.Facebook的几种违规行为&#xff1a;加好友过快或者过多&#xff1b;加群过快或者过多&#xff1b;转 发信息到群过快或者过多&#xff1b;创建主页过快或者过多&#xff1b;创建群过快或者过多&#xff1b; 主动给人发信息过多&#xff1b;IP、浏览器更换&…

spring框架实现滑动验证码功能

spring框架实现滑动验证码功能 1. 整体描述2. 具体实现2.1 滑动验证码实体类2.2 滑动验证码登录VO2.3 滑动验证码接口返回类2.4 滑动验证码工具类2.5 滑动验证码Service2.6 滑动验证码Controller 3 工程源码4 总结 1. 整体描述 之前项目需要在验证码模块&#xff0c;增加滑动验…

Android中接入hook框架:lancet-base

me.ele:lancet-base是"饿了么"开发的Android平台的开源hook框架&#xff0c;GitHub地址为&#xff1a;https://github.com/eleme/lancet。 此框架的优点如下&#xff1a; 1.编译速度快, 并且支持增量编译。 2.简洁的 API, 几行 Java 代码完成注入需求。 3.没有任何多…

Dataview的初次学习

一个很简单的例子 list from "" where contains(file.name,"教程")详细介绍 目的不是花哨&#xff0c;而是精简的整合自己的笔记&#xff0c;方便查找和翻阅。 代码块开头都省略了dataview提示词 我参考的教程&#xff1a; obsidian插件之dataview入门…

MongoDB教程 :MongoDB全文检索

MongoDB Full-Text Search Tutorial MongoDB provides a robust full-text search functionality that allows for efficient and powerful text searching capabilities. Here’s a comprehensive guide on how to utilize MongoDB’s full-text search. 1. Setting Up Mong…

【日常记录-JS】获取URL参数

Author&#xff1a;赵志乾 Date&#xff1a;2024-07-24 Declaration&#xff1a;All Right Reserved&#xff01;&#xff01;&#xff01; 1. 简介 实际项目中经常有些落地页会携带参数&#xff0c;并要求在发起请求时将携带的参数一并传递至后台服务。例如两个独立系统A和B&…

Linux系统上安装zookeeper

百度网盘 通过网盘分享的文件&#xff1a;zookeeper_linux 链接: https://pan.baidu.com/s/1_hybXZVwTRkotz0VbwbSMw?pwd8888 提取码: 8888 1.将压缩包拖进虚拟机 2.解压压缩包 cd /ruanjian/zookeeper/ tar -zxvf apache-ZooKeeper-3.7.2-bin.tar.gz3. 进入到conf目录 cd …

《python程序语言设计》第6章12题 显示字符,使用下面的函数头,编写一个打印字符的函数

def printChars(ch1, ch2, numberPerLine):a ord(ch1)b ord(ch2)count 0for i in range(a, b 1):count 1print(chr(i), end" ")if count % numberPerLine 0:print()printChars("1", "Z", 10)

以FastGPT为例提升Rag知识库应用中的检索召回命中率

提升Rag知识库应用中的检索召回命中率 在构建Rag&#xff08;Retrieval-Augmented Generation&#xff09;知识库应用时&#xff0c;检索召回知识片段的命中率是至关重要的。高效、准确的检索机制是确保AI系统能够精准响应用户查询的基础。当前&#xff0c;FastGPT主要采用三种…

使用python中的特殊字典——defaultdict

专栏总目录 一、defaultdict说明 在Python中是一个特殊类型的字典&#xff0c;它是collections模块中的一个类defaultdict的实例。这个字典与普通的字典dict不同之处在于&#xff0c;当你试图访问一个不存在的键时&#xff0c;defaultdict会自动创建一个新条目&#xff0c;其值…

使用SpringBoot集成Kafka实现用户数据变更后发送消息

概述 当使用Spring Boot集成Kafka实现用户数据变更后&#xff0c;向其他厂商发送消息&#xff0c;我们需要考虑以下步骤&#xff1a;配置Kafka连接、创建Kafka Producer发送消息、监听用户数据变更事件&#xff0c;并将事件转发到Kafka。 1. 环境准备 确保已经安装Java开发环…

【java基础】java中配置文件格式以及读取方式

在Java中&#xff0c;配置文件可以采用多种格式&#xff0c;每种格式都有其特定的使用场景和优势。以下是一些常见的配置文件格式以及如何在Java中读取它们的方法&#xff1a; 1. Properties 文件 (.properties) Properties 文件是一种常见的配置文件格式&#xff0c;它使用键…

C++沉思:预处理和编译

预处理和编译 条件编译源代码使用方式典型示例原理 使用static_assert执行编译时断言检查使用方式原理 在C中&#xff0c;编译是将源代码转换为机器代码并组织在目标文件中&#xff0c;然后将目标文件链接在一起生成可执行文件的过程。编译器实际上一次只处理一个文件&#xff…

Oracle核心进程详解并kill验证

Oracle核心进程详解并kill验证 文章目录 Oracle核心进程详解并kill验证一、说明二、核心进程详解2.1.PMON-进程监控进程2.2.SMON-系统监控进程2.3.DBWn-数据库块写入进程2.4. LGWR-日志写入器进程2.5. CKPT-检查点进程 三、Kill验证3.1.kill ckpt进程3.2.kill pmon进程3.3.kill…

智慧工地视频汇聚管理平台:打造现代化工程管理的全新视界

一、方案背景 科技高速发展的今天&#xff0c;工地施工已发生翻天覆地的变化&#xff0c;传统工地管理模式很容易造成工地管理混乱、安全事故、数据延迟等问题&#xff0c;人力资源的不足也进一步加剧了监管不到位的局面&#xff0c;严重影响了施工进度质量和安全。 视频监控…

中小企业数字化转型的关键五步,你了解吗?

在信息技术迅猛发展的当下&#xff0c;数字化转型已成为中小企业提升竞争力、实现可持续发展的关键策略。在数字化转型过程中&#xff0c;工业软件作为贯穿生产全流程的智能化引擎&#xff0c;其选择与应用显得尤为关键。那么&#xff0c;中小企业应如何科学合理的规划数字化转…

Vue前端页面嵌入mermaid图表--流程图

一、安装Mermaid 首先&#xff0c;你需要在你的项目中安装Mermaid。可以通过npm或yarn来安装&#xff1a; npm install mermaid --save # 或者 yarn add mermaid结果如图&#xff1a; 二、Vue 方法一&#xff1a;使用pre标签 使用ref属性可以帮助你在Vue组件中访问DOM元素 …

对于接口调用方式,可以使用两种不同的技术:Web Service 和 Dubbo。下面我将简要解释它们以及如何在 Maven 项目中集成它们。

对于接口调用方式&#xff0c;可以使用两种不同的技术&#xff1a;Web Service 和 Dubbo。下面我将简要解释它们以及如何在 Maven 项目中集成它们。 ### 1. Web Service&#xff08;WS&#xff09; Web Service 是一种基于标准化协议和格式进行通信的技术&#xff0c;允许不同…

数据结构 | LinkedList与链表

前言 ArrayList底层使用连续的空间,任意位置(尤其是0位置下标)插入或删除元素时,需要将该位置后序元素 整体 往前或往后搬移,故时间复杂度为O(N). 优点(给定一个下标,可以快速查找到对应的元素,时间复杂度为O(1))增容需要申请新空间,拷贝数据,释放旧空间,会有不小的消耗.增容一…

【权威发布】第二届雷达、信号与信息处理国际会议(RSIP 2024)

第二届雷达、信号与信息处理国际会议 2024 International Conference on Radar, Signal and Information Processing 【1】会议简介 第二届雷达、信号与信息处理国际会议是一次聚焦雷达技术、信号处理及信息处理领域最新研究成果和前沿趋势的盛会。会议旨在汇聚国内外雷达与信号…