当前位置： 首页 > news >正文

19-2.vuex

news 2026/3/31 22:44:28

目录

1  安装

2  挂载

2.1  vue2写法

2.2  vue3写法

3  state

3.1  声明数据

3.2  使用数据

3.3  处理数据

4  mutations

4.1  基本使用

4.2  传递参数

4.3  mutations中不能写异步的代码

5  actions

5.1  基本使用

5.2  传递参数

6  getters

Vuex是做全局数据共享的，如果不使用vuex，每个组件的数据传来传去的很麻烦

我们下面通过vue3来使用vuex

1  安装

2  挂载

2.1  vue2写法

2.2  vue3写法

3  state

state是放数据用的

3.1  声明数据

声明的数据所有的组件都可以使用

3.2  使用数据

也可以用下面这种方式使用数据，下面这种方式感觉麻烦一些

3.3  处理数据

你可以这样搞

这样搞是可以生效的，点击按钮后something的值会+1

但是vuex不建议你这样搞，因为这样你会把函数定义的哪里都有，你改起来很麻烦。vuex建议你使用mutations

4  mutations

4.1  基本使用

mutations存放 操作state中的数据的函数，函数不能包含异步操作，我们做个例子

先在mutations中定义改变something的函数

然后在组件中使用

最后把组件在app中渲染

4.2  传递参数

定义

用

可以成功实现效果

用下面这种方法也可以在组件中使用mutations，相较于上面的方法我觉得麻烦了一些

4.3  mutations中不能写异步的代码

我们写一个看看

点击按钮过1s后，虽然页面上的值改变了，但是state中的值没有改变

如果你要执行异步操作，你需要使用action

5  actions

5.1  基本使用

action存放 操作state中的数据的函数的异步操作部分，action如果想操作state中的数据，只能配合mutations使用，我们做个例子

  • 如果你不操作state中的数据就不用配合mutations，比如就单单发一个axios请求

在点击按钮的1s后，页面上的值发生了改变，state中的值也发生了改变

5.2  传递参数

像我们上面的例子就把 88 写死了，这样不是很好用，如果要通过action传递参数，我们可以这样写

1s后页面上的值改变了，state中的值也改变了

用下面这种方法也可以在组件中使用actions，相较于上面的方法感觉麻烦了些

6  getters

getters相当于是vuex中的计算属性，你可以在getters对state的值进行加工，我们做个例子

定义getters

使用getters

打开后是这样的

点击一下按钮getters的值也会发生相应的改变

也可以用下面这种方法在组件中使用getters，相较于上面的方法，下面的就麻烦了些

相关文章：

19-2.vuex

目录 1 安装 2 挂载 2.1 vue2写法 2.2 vue3写法 3 state 3.1 声明数据 3.2 使用数据 3.3 处理数据 4 mutations 4.1 基本使用 4.2 传递参数 4.3 mutations中不能写异步的代码 5 actions 5.1 基本使用 5.2 传递参数 6 getters Vuex是做全局数据…...

编程日记 2023/8/3 16:28:31

微信小程序 选择年和月以及回显 使用picker-view组件

<!--选择年月--><view bindtap"pickCalendar">{{year}}年{{month}}月</view><picker-view wx:if"{{open}}" class"fixed-select" indicator-style"height: 50px;" style"width: 100%; height: 300px;"…...

编程日记 2023/8/3 16:27:28

助力工业物联网，工业大数据之ST层的设计【二十五】

文章目录 04&#xff1a;ST层的设计05&#xff1a;服务域&#xff1a;工单主题分析06&#xff1a;服务域&#xff1a;工单主题实现 04&#xff1a;ST层的设计 目标&#xff1a;掌握ST层的设计 路径 step1&#xff1a;功能step2&#xff1a;来源step3&#xff1a;需求 实施 功…...

编程日记 2023/8/3 16:26:25

MySQL实践——参数SQL_SLAVE_SKIP_COUNTER的奥秘

每次数据库复制冲突之后&#xff0c;经常使用的一个命令如下。 SET GLOBAL SQL_SLAVE_SKIP_COUNTER 1;一般会认为&#xff0c;现在出现冲突错误&#xff0c;那就将上面参数值设置为1&#xff0c;跳过出错的这个event就可以解决了。重新启动复制&#xff0c;发现问题果然解决&…...

编程日记 2023/8/3 16:25:23

小程序面试题

文章目录 简单谈谈微信小程序小程序的原生组件有哪些小程序的安卓版和ios版是怎么开发出来uni-app弹窗被覆盖怎么解决小程序生命周期小程序路由跳转小程序的兼容问题有哪些小程序框架都掌握哪一些，uniapp都会哪一些，平时开发遇到的困难上传图片uni-app h5 端的ios图片不能加载…...

编程日记 2023/8/3 16:24:19

微信小程序接入腾讯云天御验证码

腾讯云新一代行为验证码&#xff08;Captcha&#xff09;&#xff0c;基于十道安全防护策略&#xff0c;为网页、APP、小程序开发者打造立体、全面的人机验证。在保护注册登录、活动秒杀、点赞发帖、数据保护等各大场景下业务安全的同时&#xff0c;提供更精细化的用户体验。 …...

编程日记 2023/8/3 16:23:17

Docker build 命令详解

build 命令用于使用 Dockerfile 创建镜像。 语法&#xff1a; $ docker build [OPTIONS] PATH | URL | -OPTIONS 说明 # 可通过帮助命令查看 $ docker build --help--build-arg[]: 设置镜像创建时的变量--cpu-shares: 设置 cpu 使用权重--cpu-period: 限制 CPU、CFS 周期--cpu…...

编程日记 2023/8/3 16:22:16

基于Translators的多语言翻译解决方案

当Translators库，一个用Python为个人和学生提供免费、多样、愉快翻译的库。 文章目录 Translators支持的翻译服务安装与入门参数和功能支持的语言调试和运行环境API服务Translators Translators库是一个强大的Python库，旨在为个人和学生提供免费、多样、愉快的翻译体验。它支…...

编程日记 2023/8/3 16:21:15

Unity 性能优化五：渲染模块压力

CPU压力 Batching 在GPU渲染前&#xff0c;CPU会把数据按batch发送给GPU&#xff0c;每发送一次&#xff0c;都是一个drawcall&#xff0c;GPU在渲染每个batch的时候&#xff0c;会切换渲染状态&#xff0c;这里的渲染状态指的是&#xff1a;影响对象在屏幕上的外观的渲染属性…...

编程日记 2023/8/3 16:20:14

Redis数据库 | 事务、持久化

&#x1f497;wei_shuo的个人主页 &#x1f4ab;wei_shuo的学习社区 &#x1f310;Hello World &#xff01; Redis事务操作 Redis事务是一组命令的集合&#xff0c;这些命令会作为一个整体被执行&#xff0c;要么全部执行成功&#xff0c;要么全部执行失败&#xff1b;Redis事…...

编程日记 2023/8/3 16:19:13

浅析大数据时代下的视频技术发展趋势以及AI加持下视频场景应用

视频技术的发展可以追溯到19世纪初期的早期实验。到20世纪初期&#xff0c;电视技术的发明和普及促进了视频技术的进一步发展。 1&#xff09;数字化&#xff1a;数字化技术的发明和发展使得视频技术更加先进。数字电视信号具有更高的清晰度和更大的带宽&#xff0c;可以更快地…...

编程日记 2023/8/3 16:18:11

TensorRT学习笔记--基于YoloV8检测图片和视频

1--完整项目 完整项目地址&#xff1a;https://github.com/liujf69/TensorRT-Demo git clone https://github.com/liujf69/TensorRT-Demo.gitcd TRT_YoloV8 2--模型转换 cd yolov8python gen_wts.py 3--编译项目 mkdir buildcd build cmake .. # 需要更改 CMakeLists.txt…...

编程日记 2023/8/3 16:17:10

【C++】开源：matplotlib-cpp静态图表库配置与使用

&#x1f60f;★,:.☆(&#xffe3;▽&#xffe3;)/$:.★ &#x1f60f; 这篇文章主要介绍matplotlib-cpp图表库配置与使用。 无专精则不能成&#xff0c;无涉猎则不能通。——梁启超 欢迎来到我的博客&#xff0c;一起学习&#xff0c;共同进步。 喜欢的朋友可以关注一下&…...

编程日记 2023/8/3 16:16:09

香港IT软件开发服务公司Alpha Technology 申请纳斯达克IPO上市

来源&#xff1a;猛兽财经 作者&#xff1a;猛兽财经 猛兽财经获悉&#xff0c;总部位于中国香港的IT软件开发服务公司Alpha Technology 近期已向美国证券交易委员会&#xff08;SEC&#xff09;提交招股书&#xff0c;申请在纳斯达克IPO上市&#xff0c;股票代码为&#xff0…...

编程日记 2023/8/3 16:15:08

JavaScript：数组深拷贝

文章目录 1 数组深拷贝的意义2 数组深拷贝的常用方式2.1 使用 JSON 序列化和反序列化2.2 使用递归方法2.3 使用第三方库 1 数组深拷贝的意义 JavaScript中的数组深拷贝&#xff0c;指的是创建一个完全独立于原始数组的新数组&#xff0c;所有新数组的元素都是原始数组的副本。…...

编程日记 2023/8/3 16:14:07

干翻Dubbo系列第七篇：@EnableDubbo、@DubboService、@DubboReference注解的作用

文章目录 文章说明 一&#xff1a;EnableDubbo注解的作用 1&#xff1a;注解使用地点 2&#xff1a;注解作用 3&#xff1a;路径要求 4&#xff1a;指定路径 5&#xff1a;另外一种指定路径 二&#xff1a;DubboService注解的作用 1&#xff1a;注解作用 2&#xff1…...

编程日记 2023/8/3 16:13:04

clickhouse断电重启故障解决方案

业务场景 公司的一个日志系统用到了clickhouse。一线运维反映说有个生产环境因为异常断电造成服务器重启。在执行日志系统的启动脚本时&#xff0c;一直报clickhouse启动不起来&#xff0c;日志系统无法使用。 问题排查 通过阅读启动脚本代码&#xff0c;以及启动日志系统&a…...

编程日记 2023/8/3 16:12:03

Spring学习笔记之Bean的实例化方式

文章目录 通过构造方法实例化通过简单工厂模式实例化通过factory-bean实例化BeanFactory和FactoryBean的区别BeanFactoryFactoryBean 注入自定义Date Spring为Bean提供了多种实例化方式&#xff0c;通常包括4种方式。&#xff08;也就是说在Spring中为Bean对象的创建准备了很多…...

编程日记 2023/8/3 16:11:02

JVM-类加载器

1.前置知识 1.1CPU与内存交互图&#xff1a; 2.类加载器ClassLoader 在装载(Load)阶段&#xff0c;其中第(1)步:通过类的全限定名获取其定义的二进制字节流&#xff0c;需要借助类装 载器完成&#xff0c;顾名思义&#xff0c;就是用来装载Class文件的。 2.1什么是类加载器&a…...

编程日记 2023/8/3 16:10:01

ChatGPT在法律行业的市场潜力

​ChatGPT现在已经成为我们的文字生成辅助工具、搜索引擎助手&#xff0c;许多体验过它的朋友会发现对它越来越依赖&#xff0c;并将其逐渐融入到自己的日常工作、生活。但有一点值得注意&#xff1a;这种人工智能除了技术可行、经济价值可行还要与相关规范即人类普遍的价值观念…...

编程日记 2023/8/3 16:08:58

Java中的5大AI框架！

前言在AI技术爆发的这两年里&#xff0c;我一直在思考一个问题&#xff1a;Python有LangChain&#xff0c;JavaScript有LangChain.js&#xff0c;我们Java开发者拿什么来构建AI应用&#xff1f;这个问题在2024-2025年终于有了答案。随着Spring AI的1.0 GA发布、LangChain4j的持…...

编程新知 2026/3/31 22:30:13

springboot+vue基于web的社区维修平台

目录同行可拿货,招校园代理 ,本人源头供货商功能模块划分技术实现要点扩展性设计项目技术支持源码获取详细视频演示 &#xff1a;文章底部获取博主联系方式&#xff01;同行可合作同行可拿货,招校园代理 ,本人源头供货商 功能模块划分 用户管理模块 注册与登录&#xff1a;支…...

编程新知 2026/3/31 20:03:34

Hunyuan-MT-7B翻译终端效果展示：Pixel Language Portal长文本段落对齐精度对比

Hunyuan-MT-7B翻译终端效果展示&#xff1a;Pixel Language Portal长文本段落对齐精度对比 1. 产品概览&#xff1a;像素语言冒险工坊 **像素语言跨维传送门(Pixel Language Portal)**是一款基于腾讯Hunyuan-MT-7B核心引擎构建的创新翻译终端。与传统翻译工具不同&#xff0c…...

编程新知 2026/3/31 19:39:20

A3：高级文本分析能力

A3&#xff1a;高级文本分析能力 【免费下载链接】Neosgenesis https://dev.to/answeryt/the-demo-spell-and-production-dilemma-of-ai-agents-how-i-built-a-self-learning-agent-system-4okk 项目地址: https://gitcode.com/gh_mirrors/ne/Neosgenesis 适配问题类型&…...

编程新知 2026/3/31 19:06:31

开源工具技术解析与实践指南：突破游戏性能限制的完整方案

开源工具技术解析与实践指南&#xff1a;突破游戏性能限制的完整方案 【免费下载链接】genshin-fps-unlock unlocks the 60 fps cap 项目地址: https://gitcode.com/gh_mirrors/ge/genshin-fps-unlock 一、问题溯源&#xff1a;帧率限制背后的技术债务分析 当高端显卡在…...

编程新知 2026/3/31 18:48:17

MMSkeleton部署指南：从开发环境到生产环境的完整迁移

MMSkeleton部署指南&#xff1a;从开发环境到生产环境的完整迁移 【免费下载链接】mmskeleton A OpenMMLAB toolbox for human pose estimation, skeleton-based action recognition, and action synthesis. 项目地址: https://gitcode.com/gh_mirrors/mm/mmskeleton MM…...

编程新知 2026/3/31 18:32:07

智能处理与开源工具：突破传统背景抠图限制的实时解决方案

智能处理与开源工具&#xff1a;突破传统背景抠图限制的实时解决方案 【免费下载链接】obs-backgroundremoval An OBS plugin for removing background in portrait images (video), making it easy to replace the background when recording or streaming. 项目地址: https…...

编程新知 2026/3/31 18:21:59

Pinyin-pro 3.15.1版本避坑指南：老项目兼容性问题解决方案

Pinyin-pro 3.15.1版本避坑指南&#xff1a;老项目兼容性问题解决方案 在技术迭代飞快的今天&#xff0c;前端开发者常常面临一个尴尬局面&#xff1a;新发布的工具库在功能上令人惊艳&#xff0c;却因为底层依赖或语法特性与老项目环境不兼容而无法直接使用。Pinyin-pro作为中…...

编程新知 2026/3/31 18:05:39

保姆级教程：用PHPStudy+红日靶场复现一次完整的内网渗透（从外网打到域控）

从零构建内网渗透实战&#xff1a;PHPStudy环境下的红日靶场攻防演练 在网络安全领域&#xff0c;内网渗透测试是检验企业防御体系完整性的重要手段。本文将带领读者使用常见的PHPStudy环境搭建红日靶场&#xff0c;通过模拟真实攻击路径&#xff0c;从外网Web渗透逐步深入内网…...

编程新知 2026/3/31 18:01:35

CodeT5安全使用指南：如何避免代码生成中的潜在风险

CodeT5安全使用指南&#xff1a;如何避免代码生成中的潜在风险 【免费下载链接】CodeT5 Home of CodeT5: Open Code LLMs for Code Understanding and Generation 项目地址: https://gitcode.com/gh_mirrors/co/CodeT5 CodeT5作为一款强大的代码理解与生成AI模型&#x…...

编程新知 2026/3/31 17:55:34