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

结果

在这里插入图片描述

至此,一切就都正常了。

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

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

相关文章

nodejs和vuejs的区别

一、vue项目开发中,两个经常混合使用。 不同: 1、概念不同: 一个是前端框架,一个是服务端语言。 Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使…

免费搭建知识付费平台:让知识更有价值

明理信息科技知识付费saas租户平台 在当今的知识经济时代,一个高效、便捷的知识服务平台对于企业和个人至关重要。然而,市面上的众多知识服务平台中,许多产品存在高昂的费用、无用功能的堆砌、无法定制化等问题,让用户进退两难&…

mysql根据查询结果连续序号

业务数据一般都不是连续的ID,导出Excel的时候要求连续序号 set rownum0; SELECT rownum:rownum1 as 序号,a.* from user a

C# 中英文及字符所占字节详解

1.C#中英文字符占用的空间大小 一般在英文状态下一个字母或字符占用一个字节,一个汉字用两个字节表示。 ASCII 码中,一个英文字母(不分大小写)为一个字节,一个中文汉字为两个字节。 UTF-8 编码中,一个英文字为一个字节&#xff…

VS Code打造Autohotkey环境

文章目录 简介和安装功能说明测试相关推荐 简介和安装 Autohotkey堪称自动化效率神器,可以穿透Windows窗口,获取UI对象,从而可以在现有程序的基础上,进行有针对性的开发,大大提高效率。 VS Code提供了AHK插件&#x…

KNN 分类(选择最佳的 K 值,并可视化模型精度与 n_neighbors 的关系)

import matplotlib.pyplot as plt from sklearn.datasets import load_breast_cancer from sklearn.model_selection import train_test_split from sklearn.neighbors import KNeighborsClassifier# 导入乳腺癌数据集 cancer load_breast_cancer()# 划分训练集和测试集 X_tra…

【学习笔记】CF1864H Asterism Stream

从一道 简单题 联想了过来。 Part 1 先复述一遍官方题解的做法:记几何级数 f ( x ) a k b x f(x)ak^{bx} f(x)akbx(也就是等比数列), [ 2 l , 2 r ] [2l,2r] [2l,2r]区间内的DP值可以表示为若干个几何级数的和。本题中 k 1 2 …

uniapp中uview组件库的Search 搜索 的用法

目录 基本使用 #设置输入框形状 #是否开启清除控件 #是否开启右边控件 #自定义样式 API #Props #Events 基本使用 通过placeholder参数设置占位内容通过v-model双向绑定一个变量值,设置初始化时搜索框的值,如果初始内容为空,那么请绑…

高通guestOS与hostOS通信框架HAB源码分析——概述

1)什么是HAB,他用来干什么? 如果你了解virtIO的话,就很容易明白HAB是用来干什么的。一句话来说,HAB实际作用和virtIO差不多。以高通8155(host qnxguest安卓)为例,所有硬件外设驱动都在qnx端&am…

二进制安装包安装Prometheus插件安装(mysql_exporter)

简介 mysql_exporter是用来收集MysQL或者Mariadb数据库相关指标的,mysql_exporter需要连接到数据库并有相关权限。既可以用二进制安装部署,也可以通过容器形式部署,但为了数据收集的准确性,推荐二进制安装。 一,下载安…

代码随想录算法训练营第四十八天|198.打家劫舍、213.打家劫舍II、337.打家劫舍III

代码随想录算法训练营第四十八天|198.打家劫舍、213.打家劫舍II、337.打家劫舍III 打家劫舍 198.打家劫舍 文章讲解:https://programmercarl.com/0198.%E6%89%93%E5%AE%B6%E5%8A%AB%E8%88%8D.html 题目链接:https://leetcode.cn/problems/house-robber…

[C#]使用onnxruntime部署yolov8-onnx实例分割模型

【官方框架地址】 https://github.com/ultralytics/ultralytics.git 【算法介绍】 YOLOv8 是一个 SOTA 模型,它建立在以前 YOLO 版本的成功基础上,并引入了新的功能和改进,以进一步提升性能和灵活性。具体创新包括一个新的骨干网络、一个新…

Android Framework | Linux 基础知识:入门指南

Android Framework | Linux 基础知识:入门指南 进行Android Framework开发需要具备基本的Linux基本知识,下面是一份Linux基础知识入门指南,希望对你有所帮助! 1. 简介 Linux 是一种免费、开源的操作系统,它是由芬兰…

文件高效复制与删除:轻松删除垃圾文件,让文件夹焕然一新!

你是否经常遇到文件复制繁琐、删除垃圾文件困难的问题?现在,我们为你提供了一款强大的文件高效复制与删除工具,让你轻松实现目标文件夹的整洁与高效! 第一步,我们要打开目标文件夹,就会发现里面有很多其他的…

SCPMA最新研究论文推荐!中国移动玻色量子发布联合研究成果

《中国科学:物理学 力学 天文学》英文版(SCIENCE CHINA Physics, Mechanics & Astronomy, SCPMA)出版中移(苏州)软件技术有限公司闻经纬和钱岭团队与北京玻色量子文凯团队的研究成果,文章题为“Optical experimental solution for the multiway numb…

Python练习之列表两数之和

列表两数之和 给定一个已按照非递减顺序排列的整数数组numbers,请你从数组中找出两个数满足相加之和等于target 函数应该以长度为2的整数数组的形式返回这两个数的下标值。numnbers的下标值从1开始&#xff0c;所以答案数组应当满足1<answer[0]<answer[0]<numbers.len…

Android--Jetpack--Paging详解

不尝世间醋与墨&#xff0c;怎知人间酸与苦。 择一业谋食养命&#xff0c;等一运扭转乾坤。 你见过哪些令你膛目结舌的代码技巧&#xff1f; 文章目录 不尝世间醋与墨&#xff0c;怎知人间酸与苦。择一业谋食养命&#xff0c;等一运扭转乾坤。你见过哪些令你膛目结舌的代码技…

mycat 安装和水平分表

1.拉取需要创建docker版的mycat资源 # 下载对应的资源 git clone https://github.com/ruanjiayu/docker.mycat # 进入docker.mycat cd /home/cluster/mycat/docker.mycat # 构建镜像 docker-compose build 2.修改配置 vim config/mycat/schema.xml <?xml version"…

three.js gltf后处理颜色异常(伽马校正)

效果&#xff1a; 应用了伽马校正&#xff0c;好像效果不明显 代码&#xff1a; <template><div><el-container><el-main><div class"box-card-left"><div id"threejs" style"border: 1px solid red"><…

各类好用的API推荐,赶紧收藏

快递物流订阅与推送&#xff08;含物流轨迹&#xff09;&#xff1a;【物流订阅与推送、H5物流轨迹、单号识别】支持单号的订阅与推送&#xff0c;订阅国内物流信息&#xff0c;当信息有变化时&#xff0c;推送到您的回调地址。地图轨迹支持在地图中展示包裹运输轨迹。包括顺丰…