vue 的状态库管理

Vuex 和 Pinia 均是 Vue.js 的状态管理库,它们为 Vue 应用程序提供了一种集中式的、可预测的状态管理解决方案。

Vuex 是 Vue.js 官方推荐的状态管理库之一。它的核心概念包括 state、mutation、action 和 getter。其中,state 代表应用程序的状态数据,在 Vuex 中存储为唯一的来源,mutation 用于修改状态数据并确保数据变化的可追踪性,action 用于处理异步操作或组合多个 mutation 操作,getter 可以让我们对 state 进行计算和派生,并使其变得更加易于访问。一个 Vuex store 实例是一个全局 JavaScript 对象,可以在所有组件中通过注入来进行访问和操作。

安装、引入Pinia

安装:npm install pinia 或 yarn add pinia
引入注册:
Vue3的引入方法
main.

 app.vue

<template><div>pinia-current:{{ Test.current }}</div><div>pinia-name:{{ Test.name }}</div>
</template><script setup lang="ts">
import { useTestStore } from "./store";const Test = useTestStore();
</script><style lang="scss" scoped></style>
批量修改工厂函数形式

推荐使用函数形式 可以自定义修改逻辑

<template><div>pinia-current:{{ Test.current }}</div><div>pinia-name:{{ Test.name }}</div><div style="display: flex; flex-direction: column"><button @click="funChange">工厂函数实现批量change</button>
</template><script setup lang="ts">
import { useTestStore } from "./store";const Test = useTestStore();const funChange = () => {Test.$patch((state) => {(state.current = 999), (state.name = "小3");});
};
</script><style lang="scss" scoped></style>

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

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

相关文章

GBase 8s Docker镜像说明

最后更新&#xff1a;2024-04-07 版本号使用&#xff1a; v8.8_3503x1 v8.8_3331x12 文件列表 Dockerfile FROM scratch ADD v8.8_3503x1_x64.tar.gz / EXPOSE 9088 CMD /start.sh注&#xff1a;不同数据库版本的ADD 文件名称不一样。 v8.8_3503x1_x64.tar.gz GBase 8s 数据…

深入探讨WebView的使用与后退键处理:实现无缝网页浏览体验

引言 在移动应用开发中&#xff0c;WebView作为一个强大的组件&#xff0c;为我们提供了将网页内容无缝嵌入原生应用程序的能力。它允许用户在不离开应用环境的情况下访问网页、在线内容或Web应用程序&#xff0c;极大地提升了用户体验的连贯性和便利性。然而&#xff0c;要充分…

docker自动化部署示例

前提 安装docker 、 docker-cpmpose、git、打包环境&#xff08;如meaven、jdk、node等&#xff09; 原理 git Dockerfile docker-compose 获取源码&#xff08;代码仓库&#xff09;获取可运行程序的镜像&#xff08;docker&#xff09;将打包后的程序放入镜像内&#xf…

AssetBundle打包

AssetBundle技术的概念 Unity的AssetBundle是一个资源压缩包&#xff0c;包含模型、贴图、预制体、声音甚至整个场景&#xff0c;可以在游戏运行时被加载。   AssetBundle自身保存着相互的依赖关系&#xff0c;压缩包可以使用LZMA和LZ4压缩算法&#xff0c;减少包大小&#x…

【学习】移动端App性能测试流程有哪些

移动端App性能测试是保证App性能表现的重要环节之一。随着移动设备的普及和移动互联网的发展&#xff0c;移动端App的性能测试变得越来越重要&#xff0c;通过科学合理的性能测试可以发现并解决潜在的性能问题优化App运行效果提高用户体验。性能测试旨在评估App在各种场景下的性…

基于视频监管与AI智能识别技术的水利河道综合治理解决方案

一、方案介绍 TSINGSEE青犀视频水利河道综合治理解决方案是依托视频AI智能分析技术&#xff0c;利用水质/水文等传感器、高清摄像机、水利球、无人机、无人船等感知设备实时采集数据&#xff0c;并与视频能力进行联动&#xff0c;达到智能预警的目的。 TSINGSEE青犀方案以信息…

Spring Cloud微服务入门(三)

服务注册与发现的概念 服务之间相互访问&#xff1a; 例如&#xff1a;用户中心与内容中心之间相互调用。 问题&#xff1a; 服务调用需要知道对方的服务地址&#xff0c;地址写在哪里&#xff1f; 如果服务是多个实例部署&#xff0c;该调用哪一个&#xff1f; 如果服务是多…

Jetpack Compose -> 状态机制的背后秘密

前言 上一章我们讲解了 Jetpack Compose 的无状态、状态提升、单向数据流 本章我们讲解下状态机制的背后秘密 List 前面我们讲过&#xff0c;通过 by mustableStateOf() 就可以被 Compose 自动订阅了&#xff1b;我们前面是通过 String 类型进行的自动订阅&#xff0c;那么换成…

【深度学习】YOLO-World: Real-Time Open-Vocabulary Object Detection,目标检测

介绍一个酷炫的目标检测方式&#xff1a; 论文&#xff1a;https://arxiv.org/abs/2401.17270 代码&#xff1a;https://github.com/AILab-CVC/YOLO-World 文章目录 摘要Introduction第2章 相关工作2.1 传统目标检测2.2 开放词汇目标检测 第3章 方法3.1 预训练公式&#xff1a…

Linux命令-dos2unix命令(将DOS格式文本文件转换成Unix格式)

说明 dos2unix命令 用来将DOS格式的文本文件转换成UNIX格式的&#xff08;DOS/MAC to UNIX text file format converter&#xff09;。DOS下的文本文件是以 \r\n 作为断行标志的&#xff0c;表示成十六进制就是0D0A。而Unix下的文本文件是以\n作为断行标志的&#xff0c;表示成…

vitepress系列-01-搭建笔记骨架

文章目录 搭建笔记骨架 搭建笔记骨架 环境依赖&#xff1a;Node.js 18 及以上版本。 项目创建-以macOS为例 # 1.创建空项目 mkdir vitepress-learn-notes# 2.进入 vitepress-learn-notes cd vitepress-learn-notes# 3. 初始化项目 pnpm init# 4.安装vitepress 根据自己电脑的安…

MongoDB数据更新中的乘法$mul

学习mongodb&#xff0c;体会mongodb的每一个使用细节&#xff0c;欢迎阅读威赞的文章。这是威赞发布的第57篇mongodb技术文章&#xff0c;欢迎浏览本专栏威赞发布的其他文章。 空闲下来&#xff0c;仔细阅读Mongodb的官方文档&#xff0c;发现很多新的功能。mongodb为了给开发…

【C++】STL--list

目录 list的介绍 list的使用 list的构造 list iterator的使用 list capacity list modifiers list的迭代器失效 list模拟实现 list的介绍 1. list是可以在常数范围内在任意位置进行插入和删除的序列式容器&#xff0c;并且该容器可以前后双向迭代。 2. list的底层是双向…

电容隔离型±10V输入隔离放大器特点:ISOC 124P

产品特点: 50KHz(-3dB)高带宽与ISO 124P隔离器Pin-Pin兼容 低成本小体积&#xff0c;标准DIP16Pin阻燃材料封装 精度等级:0.01级&#xff0c;全量程内非线性度0.01% 信号输入与输出之间:3000VDC隔离耐压 电源范围:4.5V~18V 双极运算:Vo10V 方便易用&#xff0c;固定单位增益配置…

ubuntu安装nginx以及开启文件服务器

1. 下载源码 下载页面&#xff1a;https://nginx.org/en/download.html 下载地址&#xff1a;https://nginx.org/download/nginx-1.24.0.tar.gz curl -O https://nginx.org/download/nginx-1.24.0.tar.gz2. 依赖配置 sudo apt install gcc make libpcre3-dev zlib1g-dev ope…

【分治算法】Strassen矩阵乘法Python实现

文章目录 [toc]问题描述基础算法时间复杂性 Strassen算法时间复杂性 问题时间复杂性Python实现 个人主页&#xff1a;丷从心. 系列专栏&#xff1a;Python基础 学习指南&#xff1a;Python学习指南 问题描述 设 A A A和 B B B是两个 n n n \times n nn矩阵&#xff0c; A A…

CICD流水线 发布应用到docker镜像仓库

准备工作 1.先注册免费的镜像仓库 复制链接: https://cr.console.aliyun.com/cn-beijing/instances 实施 1. 新建流水线&#xff0c;选择模板 2.添加流水线源&#xff0c;及是你的代码仓库, 选择对应分支. 3.代码检查以及单元测试&#xff0c;这个步骤可以不用动它. 4. …

gcc/g++:预编译阶段寻找头文件

预编译阶段寻找头文件大致可分为两种情况&#xff1a;1&#xff09;系统头文件&#xff0c;2&#xff09;用户头文件。 示例&#xff1a; 1&#xff09;用户头文件 /*brief design and implements of demo-for-precompile-to-include.author wenxuanpeiemail 15873152445163.…

AI的力量感受(附网址)

输入 科技感的 二维码&#xff0c;生成如下&#xff0c;还是可以的 输入金属感 的芯片&#xff0c;效果就很好了 金属感 打印机&#xff0c;细节丰富&#xff0c;丁达尔效应 就有点跑题了 金属感 扫码仪 还有点像 3D 封装长这样&#xff0c;跑题比较严重 总之&#xff0c;AI还…

如何使用生成式人工智能撰写关于新产品发布的文章?

利用生成式人工智能撰写新产品发布文章确实是一种既有创意又高效的内容生成方式。以下是如何做到这一点的指南&#xff0c;附带一些背景信息&#xff1a; • 背景&#xff1a;在撰写文章之前&#xff0c;收集有关您的新产品的信息。这包括产品的名称、类别、特点、优势、目标受…