Pinia(三): 了解和使用state

1.state

state 就是我们要定义的数据, 如果定义 store 时传入的第二个参数是对象, 那么 state 需要是一个函数, 这个函数的返回值才是状态的初始值.这样设计的原因是为了让 Pinia 在客户端和服务端都可以工作
官方推荐使用箭头函数(()=>{ })获得更好的类型推断

import { defineStore } from 'pinia';const userStore = defineStore('user', {state: () => {return {user: {name: 'tom',age: 18},color: 'red',userList: [],}}
})

2.TypeScript

可以定义 interface 来标记类型

import { defineStore } from 'pinia';interface UserInfo {name: string;age: number;
}export const userStore = defineStore('user', {state: () => {return {color: 'red' as string,userList: [] as UserInfo[],user: {name: 'tom',age: 18} as UserInfo | null}}
})

3.访问 state

默认可以直接通过 store 实例访问和修改 state.

const user = userStore();
function changeColor() {user.color = 'black'
}
function changeAge() {user.user.age++;
}

4.重置 state

调用 store 的 $reset()

function resetStore() {user.$reset();
}

5.修改 state

除了直接通过 store 修改 state, 还可以调用 store 的 $patch 方法. 这个方法允许一次进行多处修改

function patchChange() {user.$patch({color: 'skyblue',user: {age: user.user.age + 10}})
}

但是这种语法有时会很麻烦, 比如我们想要对数组进行增删时, 这种语法会要求创建一个新的数组. 所以 $patch 方法可以接收一个函数为参数.

function patchChangeFunction() {user.$patch((state) => {state.userList.push({ name: 'mike', age: 19 });state.user.age++;state.color = 'pink';});
}

也直接通过 store 的 $state 属性修改 state, 因为其内部会调用 $patch

function stupidChange() {user.$state = {color: 'hahha'}// 实际上内部调用了// user.$patch({ color: 'hahha' })
}

6.订阅状态

我们可以通过 store 的 $subscribe 方法侦听 state 的改变. 使用 $subscribe 而不是 watch() 的好处是 $subscribe 总是在 state 修改之后执行一次.

user.$subscribe((mutation, state) => {console.log('mutation', mutation);
})

在这里插入图片描述
在这里插入图片描述

const stopSubscribeFunc = user.$subscribe((mutation, state) => {console.log('mutation', mutation);console.log('state', state);
})
function stopSubscribe() {stopSubscribeFunc()
}

如果在组件内调用 store.$subscribe(), 那么组件卸载时会自动清理定于, 除非将 detached 设置为 true

user.$subscribe((mutation, state) => {// do something...
}, {detached: true
})

如果要实现保存数据到 localStorage, 可以使用 watch

//main.js里
const pinia = createPinia();
app.use(pinia);watch(pinia.state,(state) => {console.log(state)localStorage.setItem('piniaState', JSON.stringify(state));},{deep: true,immediate: true}
)

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

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

相关文章

最新张量补全论文收集【8篇】

目录 1、利用张量子空间先验:增强张量补全的核范数最小化和 2、基于可学习空间光谱变换的张量核范数多维视觉数据恢复 3、用于图像补全的增强型低秩和稀疏 Tucker 分解 4、多模态核心张量分解及其在低秩张量补全中的应用 5、 低秩张量环的噪声张量补全 6、 视…

三十四、openlayers官网示例Dynamic clusters解析——动态的聚合图层

官网demo地址: https://openlayers.org/en/latest/examples/clusters-dynamic.html 这篇绘制了多个聚合图层。 先初始化地图 ,设置了地图视角的边界extent,限制了地图缩放的范围 initMap() {const raster new TileLayer({source: new XYZ…

JAVA流程控制break,continue,goto

1.break在任何循环语句的主体成分,均可用break控制循环的流程。break用于强行退出循环,不执行循环中剩余的语句。(break语句也在switch语句中使用) 如图:break语句强行退出循环,结果输出1~30便结束&#xf…

两数之和-第13届蓝桥杯选拔赛Python真题精选

[导读]:超平老师的Scratch蓝桥杯真题解读系列在推出之后,受到了广大老师和家长的好评,非常感谢各位的认可和厚爱。作为回馈,超平老师计划推出《Python蓝桥杯真题解析100讲》,这是解读系列的第76讲。 两数之和&#xf…

Java面试八股之死锁和活锁的区别

死锁和活锁的区别 基本定义: 死锁(Deadlock):指两个或多个线程互相等待对方释放资源,从而导致所有线程都无法继续执行的状态。每个线程至少持有一个资源,并等待另一个由其他线程持有的资源,形…

初始操作系统

概念: 1.系统资源的管理者:实质控制和管理整个计算机系统的硬件和软件资源,并合理地组织调度计算机地工作和资源的分配 2.向上层提供方便易用的服务:以提供给用户和其他软件方便接口和环境 封装思想:操作系统把一些丑…

阿里云服务器接入百度云防护后显示502原因

最近,发现很多使用了阿里云服务器的网站出现502的情况 经百度云防护技术排查发现阿里云机房对百度云防护的IP进行了拦截,原因近期可能是百度云防护的IP请求过于频繁,导致阿里云机房策略把百度云的IP当成了攻击IP。 解决办法是提交工单让阿里…

第三方模块的下载与安装

自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 在进行Python程序开发时,除了可以使用Python内置的标准模块外,还有很多第三方模块可以被我们所使用。对于这些第三方模块&…

5.31——进军MYSQL

目录 简略版: 详解版: 一. myaql概述: 数据库: 数据库管理系统: SQL: 二. masql的安装: 启动与停止: 1. MYSQL提供的命令行 2. windows提供的命令行工具 三.数据模型 …

Claude 3可使用第三方API,实现业务流程自动化

5月31日,著名大模型平台Anthropic宣布,Claude3模型可以使用第三方API和工具。 这也就是说,用户通过文本提问的方式就能让Claude自动执行多种任务,例如,从发票中自动提取姓名、日期、金额等,该功能对于开发…

DVWA靶场搭建:Apache、MySQL、PHP、DVWA

最近为了能够较为真实地学习Web渗透的各种技术,就想着自己搭建一个专门用于学习的Web演练平台--DVWA“靶场”。 DVWA可以进行暴力(破解)、命令行注入、跨站请求伪造、文件包含、文件上传、不安全的验证码、SQL注入、SQL盲注、弱会话ID、XSS漏…

批量归一化(BN)和层归一化(LN)的区别

批量归一化(Batch Normalization, BN)和层归一化(Layer Normalization, LN)是深度学习中常用的两种归一化技术,它们主要用于解决训练过程中的内部协变量偏移问题,加速模型收敛和提高稳定性。 1. 为什么需要…

基于Java的工程项目管理系统的功能与技术优势 工程管理系统源码

在当今的工程领域,项目管理的高效协同和信息共享是提升工作效率、降低成本的关键。本文将向您介绍一款基于Java技术构建的工程项目管理系统,该系统采用前后端分离的先进技术框架,功能全面,能够满足不同角色的需求,从项…

如何制作一本温馨的电子相册呢?

随着科技的不断发展,电子相册已经成为了一种流行的方式来记录和分享我们的生活。一张张照片,一段段视频,都能让我们回忆起那些温馨的时光。那么,如何制作一本温馨的电子相册呢? 首先,选择一款合适的电子相册…

Vuforia AR篇(五)— 地平面检测

目录 前言一、什么是地平面识别?二、使用步骤三、示例代码四、效果五、总结 前言 在增强现实(AR)应用程序的开发中,地平面识别是一项关键技术,它允许虚拟对象与现实世界的地面进行互动。Vuforia 是一个功能强大的 AR …

【Linux】深入理解进程的优先级(Linux 2.6版本O(1)调度算法)

进程的优先级 【前置知识】一、进程的优先级(一)为什么要有优先级?(二)进程的优先级的范围 二、操作系统是如何实现进程的优先级?(Linux内核2.6版本O(1)调度算法) 【前置知识】 首先我们要了解…

FFmpeg 中 Filters 使用文档介绍

描述 这份文档描述了由libavfilter库提供的过滤器Filters、源sources和接收器sinks。 滤镜介绍 FFmpeg通过libavfilter库启用过滤功能。在libavfilter中,一个过滤器可以有多个输入和多个输出。为了说明可能的类型,我们考虑以下过滤器图: 这个过滤器图将输入流分成两个流,然…

补上缺失的一环----一种数据库系统主动对外推送表的增删改实时变动数据的实践

在实践中,一些应用程序或模块需要实时获取某些数据库表的增删改变动数据。 对此需求,常见的方案有: 1、应用程序通过轮循查询数据库方式获取数据库表的增删改变动数据. 2、应用程序在把数据写入数据库表之前,通过事件方式向外通知数据库表的增…

OZON的选品工具,OZON选品工具推荐

在电商领域,选品一直是决定卖家成功与否的关键因素之一。随着OZON平台的崛起,越来越多的卖家开始关注并寻求有效的选品工具,以帮助他们在这个竞争激烈的市场中脱颖而出。本文将详细介绍OZON的选品工具,并推荐几款实用的辅助工具&a…

redis之发布与订阅

华子目录 什么是发布与订阅?常用命令psubscribe pattern1 [pattern2...]subscribe channel1 [channel2...]publish channel messagepunsubscribe pattern1 [pattern2...]unsubscribe [channel1 [channel2...]]pubsub subcommand argument1 [argument2...] 示例1示例…