pinia 给 state 指定变量类型

news2024/11/20 6:28:29

pinia 给 state 指定变量类型

问题描述

自从用 vite+ts+vue3 以来,我一直有一个很大的疑问,就是 pinia 中的 state 变量类型该从哪定义,如何定义它?
因为我在使用未定义类型的 state 变量的时候一直会有一个提示,提示说不知道这个变量的类型是什么,或者使用的对象变量里没有这个属性值,如下:

在这里插入图片描述

也确实是这样,我只给 currentDiary 定义了是个对象 {} 并没有指定它的内部属性值,所以它自然不知道里面有什么内容。

思考

如果想让上面的 currentDiary.is_public 被识别,就需要给它指定一个类型,我已经写了一个 DiaryEntity 的类型,里面有 is_public 这个字段

在这里插入图片描述

现在需要解决的就是:如何给 state 变量定义它的数据类型?

在用 pinia 之前我没有认真看官方文档,就用以往 vue2 中 vuex 中的知识来直接用的,后来换上 ts 之后确实不知道该怎么给它定义类型,我也知道类似这样的定义方式:

let tempValue: {id: number, name: string, age: number} = {
	id: 1,
	name: 'Kyle',
	age: '34'
} 

但如果你的 state 定义的太多的变量,如果再以这种方式定义每个变量的类型,那就相当于把整个 state 又重写了一遍,这种方式明显不行。

解决办法

当我再回头看官方文档的时候才发现,如何定义变量类型就在那明明白白的写着:

https://pinia.vuejs.org/zh/core-concepts/state.html#typescript

在这里插入图片描述

所以,我只需要给它用 as 定义一下类型就可以了。

结果

在这里插入图片描述

至此,一切就都正常了。

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

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

相关文章

JAVA集合框架总结

集合框架概述 1.1 生活中的容器 1.2 数组的特点与弊端 一方面,面向对象语言对事物的体现都是以对象的形式,为了方便对多个对象的操作,就要对对象进行存储。另一方面,使用数组存储对象方面具有一些弊端,而Java 集合就…

Unity之预制体与变体

PS:不用说了,我在写博客就是在摸鱼 一、预制体 不知道大家小时候有没有看过火影,记得剧情最开始的时候水木哄骗鸣人去偷封印之书,反而让鸣人学会了多重影分身之术: 好了,小编绞尽脑子终于想好怎么向大家介绍预制体了&a…

element中Tree 树形控件实现多选、展开折叠、全选全不选、父子联动、默认展开、默认选中、默认禁用、自定义节点内容、可拖拽节点、手风琴模式

目录 1.代码实现2. 效果图3. 使用到的部分属性说明4. 更多属性配置查看element官网 1.代码实现 <template><div class"TreePage"><el-checkboxv-model"menuExpand"change"handleCheckedTreeExpand($event, menu)">展开/折叠&l…

亚马逊店铺遇到账号申诉模版分享

1.表达诚意&#xff0c;先认错再说&#xff1a;我知道&#xff0c;最近我们在Amazon.com上作为卖家的表现已经低于亚马逊和我们自己的质量标准。 2.清楚分明的格式&#xff1a;我们库存管理的混乱导致了延迟发货&#xff0c;更糟糕的是&#xff0c;物品无法使用。当延迟发货和…

00 项目结构

文章目录 后端 后端 后端 - sky-common包 公共类&#xff0c;工具类&#xff0c;常量类- constant 常量类- context 上下文有关的- enumenation 枚举- exception 自定义异常类- json json处理类- properties boot相关的配置属性类- result 结果类- uti…

【React系列】React中的CSS

本文来自#React系列教程&#xff1a;https://mp.weixin.qq.com/mp/appmsgalbum?__bizMzg5MDAzNzkwNA&actiongetalbum&album_id1566025152667107329) 一. React中的css方案 1.1. react 中的 css 事实上&#xff0c;css 一直是 React 的痛点&#xff0c;也是被很多开发…

gitlab高级功能之Kubernetes Agent介绍

文章目录 1. 前置条件2. 简介3. GitLab Kubernetes Agent 的部署3.1 启用 Agent 服务端3.2 创建 Agent 配置和清单仓库 4. 安装agent4.1 连接k8s集群4.2 在集群中部署4.3 修改资源清淡&#xff0c;调整pod的副本数 5. 思考 1. 前置条件 gitlab 14.5 专业版k8s集群helm客户端工…

风车模型与代码

这个模型使用NetLogo乌龟来重复绘制圆圈&#xff0c;定期转动&#xff0c;以便显示出类似万花筒或风车的效果。这是一个演示&#xff0c;展示了一组简单的代理规则如何产生复杂而美丽的图案。 内部工作原理非常简单。创建了许多乌龟&#xff0c;它们的笔都是放下的&#xff08…

一文全面了解 LSM BPF (含实战,强烈建议收藏)

本文地址&#xff1a;https://www.ebpf.top/post/lsm_bpf_intro 文章目录 1. 安全背景知识2. 内核安全策略模块通用框架 LSM2.1 LSM 框架介绍2.2 LSM 架构2.3 LSM 中的钩子函数 3. LSM BPF3.1 BCC 实践3.2 libbpf-bootstrap 框架实践 4. 总结5. 附录&#xff1a;LSM 热修内核漏…

Java 支持表情包存储 Incorrect string value: ‘\\xF0\\x9F\\x98\\x8A\\xF0\\x9F...‘

一&#xff0c;前言 最近测试提出了一个比较刁钻的bug 在提交表单数据的时候&#xff0c;支持表情输入&#xff0c;如下 看了一下前端参数&#xff0c;也是正常传递 但是调用接口的时候&#xff0c;后端却报错 Cause: java.sql.SQLException: Incorrect string value: \\xF0…

【python】使用fitz包读取PDF文件报错“ModuleNotFoundError: No module named ‘frontend‘”

【python】使用fitz包读取PDF文件报错“ModuleNotFoundError: No module named ‘frontend’” 正确解决过程 在读取PDF文件时&#xff0c;我使用了fitz包&#xff0c;当使用代码import fitz导入该包时&#xff0c;出现了报错&#xff1a; 于是我直接使用以下代码安装fronten…

技术查漏补缺(1)Logback

一、下定义&#xff1a;Logback是一个开源的日志组件 二、Logback的maven <!--这个依赖直接包含了 logback-core 以及 slf4j-api的依赖--> <dependency><groupId>ch.qos.logback</groupId><artifactId>logback-classic</artifactId><v…

基于Kettle开发的web版数据集成开源工具(data-integration)-介绍篇

目录 &#x1f4da;第一章 官网介绍&#x1f4d7;目标实现&#xff1a;让kettle使用更简单&#x1f4d7;架构及组成 &#x1f4da;第二章 核心功能&#x1f4da;第三章 对比Kettle&#x1f4d7;工具栏位比对&#x1f4d7;工具栏组件内容比对&#x1f4d7;扩展&#xff1a;WebSp…

【CMake】5. 单项目多模块添加第三方依赖示例工程

CMake 示例工程代码 https://github.com/LABELNET/cmake-simple 单项目单模块示例工程 https://github.com/LABELNET/cmake-simple/tree/main/simple-mod-deps 这里引入 C gRPC 依赖&#xff0c;进行示例 1. 多模块工程 第三方依赖 CMake 多模块工程&#xff0c;这是一个…

Android 项目工程配置签名文件

1. Android签名证书(.keystore) Android平台打包发布apk应用&#xff0c;需要使用数字证书&#xff08;.keystore文件&#xff09;进行签名&#xff0c;用于表明开发者身份。   Android证书的生成是自助和免费的&#xff0c;不需要审批或付费。   可以使用JRE环境中的keyto…

mariadb实现主从同步

准备两台服务器 Mariadb-Master&#xff1a;192.168.44.150 Mariadb-Backup&#xff1a;192.168.44.148 安装mariadb&#xff1a; https://blog.csdn.net/qq_50247813/article/details/135402502?spm1001.2014.3001.5502 组从复制原理如下 修改主数据库配置如下 vi /etc/my.…

Kotlin/JS工程构建及编译运行到浏览器

概述 Kotlin/JS 提供了转换 Kotlin 代码、Kotlin 标准库的能力&#xff0c;并且兼容 JavaScript 的任何依赖项。Kotlin/JS 的当前实现以 ES5 为目标。 使用 Kotlin/JS 的推荐方法是通过 kotlin.multiplatform Gradle 插件。它提供了一种集中且便捷的方式来设置与控制以 JavaS…

大数据框架ElasticSearch学习网站,让你的技能瞬间升级!

介绍&#xff1a;Elasticsearch是一个分布式、免费和开放的搜索和分析引擎&#xff0c;它适用于所有类型的数据&#xff0c;包括文本Elasticsearch是一个分布式、免费和开放的搜索和分析引擎&#xff0c;它适用于所有类型的数据&#xff0c;包括文本、数字、地理空间、结构化和…

如何保障开放网络边界安全?

针对开放式网络&#xff08;办事大厅、视频网络等&#xff09;&#xff0c;如何在内部网络构建起一道安全屏障&#xff0c;有效解决广大用户普遍存在的无法保证网络边界完整、边界安全、公共场所终端摄像头管理、办事大厅智能设备&#xff08;一体机等&#xff09;管理、开放场…

1- forecasting at scale论文阅读

目录 1. 什么是时间序列2. 什么是时间序列预测3. 时间序列预测的范式4. 时间序列的专有名词介绍5. 时间序列评估 1. 什么是时间序列 按时间先后顺序出现的有序序列 2. 什么是时间序列预测 点预测&#xff1a;预测未来的某一个时间点&#xff0c;它的值到底是多少&#xff0c…