pinia 给 state 指定变量类型

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 定义一下类型就可以了。

结果

在这里插入图片描述

至此,一切就都正常了。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

HttpSession的使用

1 HttpSession 概述 在 Java Servlet API 中引入 session 机制来跟踪客户的状态。session 指的是在一段时间内,单个客户与 Web 服务器的一连串相关的交互过程。在一个 session 中,客户可能会多次请求访问同一个网页,也有可能请求访问各种不同…

MathType2024MAC苹果电脑版本下载安装图文教程

在数学和科学的世界里,表达精确的方程式和化学公式是至关重要的。MathType作为一款及其优秀且有全球影响力的数学公式编辑器,让这一切变得触手可及。MathType Mac版已全新升级,作为Microsoft Word和PowerPoint的Add-In插件,为您的…

JavaWeb——后端之maven

三、后端Web开发 1. Maven 1.1 概念 概念: 一款用于管理和构建java项目的工具,是apache下的一个开源项目 作用: 依赖管理:jar包,避免版本冲突问题——不用手动导jar包,只需要在配置文件(pom…

burpsuite模块介绍之项目选项

使用该模块中的功能实现对token的爆破 靶场搭建:phpstudy的安装与靶场搭建 - junlin623 - 博客园 (cnblogs.com) 实现 1)先抓个包 2)设置宏 要实现我们爆破的时候请求的token也跟靶场一样一次一换从而实现爆破,那就需要用到项目选项中的宏(预编译功能)

CSS学习之路: 基础学习篇

css基础 一、css3 概述 1.1、什么是css Cascading style sheets 层叠样式表,级联样式表,简称样式表 1.2、css作用 对页面中html元素进行美化 1.3、HTML和css的关系 HTML:负责页面结构的搭建,负责数据的展示CSS:…

【KingbaseES】实现MySql函数WEEKS_BETWEEN

WEEKS_BETWEEN CREATE OR REPLACE FUNCTION weeks_between(start_date date, end_date date) RETURNS integer AS $$ BEGIN RETURN EXTRACT(WEEK FROM end_date) - EXTRACT(WEEK FROM start_date); END; $$ LANGUAGE plpgsql IMMUTABLE;结果展示

【算法】算法设计与分析 期末复习总结

第一章 算法概述 时间复杂度比大小,用代入法,代入2即可。求渐进表达式,就是求极限,以极限为O的括号;O是指上界,Ω是指下界,θ是指上下界相等,在这里,可以这样理解&#…

SwiftUI之深入解析如何创建一个灵活的选择器

一、前言 在 Dribbble 上找到的设计的 SwiftUI 实现时,可以尝试通过一些酷炫的筛选器扩展该项目以缩小结果列表。筛选视图将由两个独立的筛选选项组成,两者都有一些可选项可供选择。但是,在使用 UIKit 时,总是将这种类型的视图实…

智能分析网关V4智慧港口码头可视化视频智能监管方案

一、需求背景 近年来,水利港口码头正在进行智能化建设,现场管理已经是重中之重。港口作为货物、集装箱堆放及中转机构,具有昼夜不歇、天气多变、环境恶劣等特性,安全保卫工作显得更加重要。港口码头的巡检现场如何高效、快捷地对…

指令周期流程图相关题目

已知CPU结构如下图所示,其中包括一个累加器AC、一个状态寄存器和其他几个寄存器。各部分之间的连线表示数据通路,箭头表示信息传递方向。试完成以下工作:①写出图中四个寄存器A、B、C、D的名称和作用;②简述完成指令ADD Y的数据通…

Spark Streaming与数据源连接:Kinesis、Flume等

在大数据领域,实时数据处理变得越来越重要。Apache Spark Streaming是一个强大的工具,可用于处理实时数据流。本文将介绍如何使用Spark Streaming连接各种数据源,包括Amazon Kinesis、Apache Flume等,并提供详细的示例代码&#x…

图解设计模式-中介者模式(Mediator)

中介者模式 定义 使用一个中介者对象(mediator)集中封装多个具有依赖/关联关系的对象(colleague,同事对象)之间的交互,使各对象之间不再互相引用,降低对象之间的强耦合程度,对象之…

【Python案例实战】水质安全分析及建模预测

一、引言 1.水资源的重要性 水是生命之源,是人类生存和发展的基础。它是生态系统中不可或缺的组成部分,对于维系地球上的生命、农业、工业、城市发展等方面都具有至关重要的作用。 2.水质安全与人类健康的关系 水质安全直接关系到人类的健康和生存。水中的污染物和有害物…

面向对象的三大特征之一多态

多态 概念 多态是同一个对象,在不同时刻表现出来不同的形态,称之为多态。 例如:水,我们把水理解成为一个对象,而水会有不同的形态,比如 液态水、冰块、水蒸气 多态的前提 有继承/实现关系(继承…

新手深入浅出理解PyTorch归一化层全解析

目录 torch.nn子模块normal层详解 nn.BatchNorm1d BatchNorm1d 函数简介 函数工作原理 参数详解 使用技巧与注意事项 示例代码 nn.BatchNorm2d BatchNorm2d 函数简介 函数工作原理 参数详解 使用技巧与注意事项 示例代码 nn.BatchNorm3d BatchNorm3d 函数简介 参…

KeyError: ‘model_state_dict‘

问题 加载模型权重文件时获取model_state_dict键失败 解决 单步调试发现保存模型权重时正确保存了该键值对,再次调试时发现莫名奇妙又没错了 首先确认保存模型时的状态字典键名:确保在保存模型权重时,正确地使用了 model.state_dict() 方法…

飞书文档如何转markdown

飞书文档如何转markdown 实现效果实现步骤其他方法 实现效果 导出的结果挂在这了 https://thinkasany.github.io/docs/#/ 实现步骤 以https://upyun.feishu.cn/docx/KERsd1DpioPb1xxye9VcuXbhnBC这篇文章为例 使用工具 https://github.com/Wsine/feishu2md,提供了…

【计算机算法设计与分析】棋盘覆盖问题(C++_分治法)

文章目录 题目描述测试样例算法原理算法实现参考资料 题目描述 在一个 2 k 2 k 2^k \times 2^k 2k2k个方格组成的棋盘中,若恰有一个方格与其他方格不同,则称该方格为一个特殊方格,且称该棋盘为一个特殊棋盘。显然,特殊方格在棋…

腾讯云Centos9使用docker的方式安装APISIX

在虚拟机中安装Docker、Docker-compose 安装Docker 清除旧版本的docker yum remove docker docker-client docker-client-latest docker-common docker-latest docker-latest-logrotate docker-logrotate docker-engine 安装docker的依赖 yum install -y yum-utils device-ma…

在k8s集群中部署多nginx-ingress

关于ingress的介绍,前面已经详细讲过了,参考ingress-nginx详解和部署方案。本案例ingress的部署使用deploymentLB的方式。 参考链接: 多个ingress部署 文章目录 1. 下载ingress的文件2. 文件资源分析3. 部署ingress3.1 部署第一套ingress3.1…