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

大白话Vuex 核心概念（state、mutations、actions）的使用案例与原理

news 来源：原创 2025/9/14 20:43:27

大白话Vuex 核心概念（state、mutations、actions）的使用案例与原理

Vuex是Vue.js应用程序中专门用来管理状态的工具，就好像是一个大管家，帮你把项目里一些重要的数据和操作管理得井井有条。下面用大白话结合案例来介绍Vuex核心概念state、mutations、actions的使用案例与原理：

state

原理：state就像是一个仓库，用来存放数据的。在Vuex里，它就是用来存储整个应用程序中需要共享的数据的地方，比如用户的登录状态、用户名、购物车商品列表等。组件可以从这个仓库里获取数据来展示。
使用案例

// 创建一个Vuex实例
const store = new Vuex.Store({state: {// 存储当前登录用户的姓名username: '张三' }
});// 在Vue组件中获取state中的数据
export default {computed: {user() {// 通过this.$store.state来访问state中的数据return this.$store.state.username; }}
};

mutations

原理：mutations就像是仓库管理员，专门负责修改仓库（state）里的数据。但是这个管理员很严格，只能通过它规定的方式来修改数据，这样可以保证数据的修改是可控的、可追踪的。而且mutations里的函数必须是同步的，不能是异步的，就像管理员一次只能做一件事，不能同时做好几件事。
使用案例

const store = new Vuex.Store({state: {count: 0},mutations: {// 定义一个名为increment的mutation来增加count的值increment(state) { state.count++;}}
});// 在Vue组件中提交mutation
methods: {add() {// 通过this.$store.commit来提交mutationthis.$store.commit('increment'); }
}

actions

原理：actions可以理解为是仓库的调度员，它不直接修改数据，但是可以指挥管理员（mutations）去修改数据。它的作用是处理一些异步操作，比如从服务器获取数据，等数据拿到了再告诉管理员去修改仓库里的数据。
使用案例

const store = new Vuex.Store({state: {userList: []},mutations: {// 定义一个名为setUserList的mutation来设置用户列表setUserList(state, users) { state.userList = users;}},actions: {// 定义一个名为fetchUsers的action来获取用户列表async fetchUsers({ commit }) { // 假设这里是发送网络请求获取用户数据const response = await axios.get('https://example.com/api/users'); // 拿到数据后，通过commit提交mutation来修改statecommit('setUserList', response.data); }}
});// 在Vue组件中调用action
methods: {async getUsers() {// 通过this.$store.dispatch来调用actionawait this.$store.dispatch('fetchUsers'); }
}

React的Diff算法和Vue的Diff算法有什么区别？

大白话Vuex 核心概念（state、mutations、actions）的使用案例与原理

大白话Vuex 核心概念（state、mutations、actions）的使用案例与原理 Vuex是Vue.js应用程序中专门用来管理状态的工具，就好像是一个大管家，帮你把项目里一些重要的数据和操作管理得井井有条。下面用大白话结合案例来介绍Vuex核心概…...

编程日记 2025/9/14 20:43:27

【学写LibreCAD】1 LibreCAD主程序

一、源码头文件： #ifndef MAIN_H #define MAIN_H#include<QStringList>#define STR(x) #x #define XSTR(x) STR(x)/*** brief handleArgs* param argc cli argument counter from main()* param argv cli arguments from main()* param argClean a list…...

编程日记 2025/9/14 20:41:31

CentOS7最小化安装中使用curl安装yum和wget

在 CentOS 7 最小化安装中，如果已经有curl工具，可以按照以下步骤使用它来安装yum和wget： 1. 备份原有的 yum 源配置文件为了避免配置冲突或后续需要恢复，先备份原有的yum源配置文件。 mv /etc/yum.repos.d/CentOS-Base.repo /…...

编程日记 2025/9/10 6:22:33

【Linux】learning notes（3）make、copy、move、remove

文章目录 1、mkdir （make directory）2、rmdir （remove directory）3、rm（remove）4、>5、touch 新建文件6、mv（move）7、cp（copy） 1、mkdir （make…...

编程日记 2025/9/14 10:09:48

P10108 [GESP202312 六级] 闯关游戏

题目大意如题分析设最佳通关方案为 { s 1 , s 2 , . . . , s k } \{s_1,s_2,...,s_k\} {s1,s2,...,sk}，其中 s i s_i si 代表第 i i i 次到达的关卡（ ≥ N \ge N ≥N 的不算）。当 a k N − 1 a_kN-1 akN−1 时&#…...

编程日记 2025/9/8 13:16:25

Dubbo RPC 原理

一、Dubbo 简介 Apache Dubbo 是一款高性能、轻量级的开源 RPC 框架，支持服务治理、协议扩展、负载均衡、容错机制等核心功能，广泛应用于微服务架构。其核心目标是解决分布式服务之间的高效通信与服务治理问题。二、Dubbo 架构设计 1. 核心组件 Prov…...

编程日记 2025/9/14 20:41:30

网络安全机器学习算法计算机网络安全机制

（一）网络操作系统安全网络操作系统安全是整个网络系统安全的基础。操作系统安全机制主要包括访问控制和隔离控制。访问控制系统一般包括主体、客体和安全访问政策访问控制类型： 自主访问控制强制访问控制访问控制措施： 入…...

编程日记 2025/9/8 12:26:26

【Jenkins】一种灵活定义多个执行label节点的jenkinsfile写法

确定执行机器和自定义工作目录（忽略节点的workspace） pipeline{agent {node {label "XXXXX"customWorkspace "E:/workspace/"}}parameters {}options {}stages {}post {} }仅确定执行机器 pipeline{agent { label "XXXXX&quo…...

编程日记 2025/9/14 20:41:31

Web自动化之Selenium控制已经打开的浏览器(Chrome,Edge)

在使用selenium进行web自动化或爬虫的时候,经常会面临登录的情况,对于这种情况,我们可以利用Selenium控制已经打开的浏览器，从而避免每次都需要重新打开浏览器并进行登录的繁琐步骤。目录说明启动浏览器注意 --user-data-dir说明代码设定代码改进代…...

编程日记 2025/9/10 0:14:01

【万字长文】开源之播对话白鲸开源CEO郭炜--乐观主义的开源精神走得更远

本文为白鲸开源科技CEO郭炜1小时深度访谈全记录来源于：开源之播」Episode15:对话郭炜–乐观主义的开源精神走得更远大家好，我是郭炜，开源圈的“郭大侠”。作为 Apache 基金会的成员，我曾参与并孵化了多个开源项目，如…...

编程日记 2025/9/13 13:00:52

Verilog 位运算符和逻辑运算符的使用

Verilog 位运算符和逻辑运算符的使用目录前言一、逻辑运算符二、位运算符总结前言本文详细描述了Verilog 逻辑运算符和位运算符的使用，随着编程的熟练，有时候总是喜欢混用它们，虽然能实现同样的功能，但最好还是注意一下…...

编程日记 2025/9/11 14:26:57

压测报告：DeepSeek-R1-Distill-Qwen-32B模型性能评估

1. 实验背景本实验旨在评估DeepSeek-R1-Distill-Qwen-32B模型在特定硬件配置下的性能表现。测试硬件为GPU服务器。实验主要关注模型在不同并发请求数下的峰值生成速度。吞吐量（Throughput）：测试模型在单位时间内可以处理多少请求，通常以“每秒生成的令牌数（tokens/s）…...

编程日记 2025/9/14 13:32:31

【论文笔记】ClipSAM: CLIP and SAM collaboration for zero-shot anomaly segmentation

原文链接摘要近年来，CLIP 和 SAM 等基础模型在零样本异常分割 (ZSAS) 任务中展现出良好的性能。然而，无论是基于 CLIP 还是基于 SAM 的 ZSAS 方法，仍然存在不可忽视的关键缺陷：1) CLIP 主要关注不同输入之间的全局特征对齐&am…...

编程日记 2025/9/11 19:05:41

DeepSeek：面向效率与垂直领域的下一代大语言模型技术解析

本文将深入剖析DeepSeek模型的核心算法架构，揭示其在神经网络技术上的突破性创新，并与主流大模型进行全方位技术对比。文章涵盖模型设计理念、训练范式优化、应用场景差异等关键维度，为读者呈现大语言模型领域的最新发展图景。一、DeepSeek…...

编程日记 2025/9/11 8:46:36

win32汇编环境,加速键的应用示例

;运行效果 ;win32汇编环境,加速键的应用示例 ;加速键，就是按某个键，开启某个功能。不用鼠标点来点去的东西。 ;直接抄进RadAsm可编译运行。重要部分加备注。 ;下面为asm文件 ;>>>>>>>>>>>>>>>>>>…...

编程日记 2025/9/11 17:14:26

【计算机网络】OSI模型、TCP/IP模型、路由器、集线器、交换机

一、计算机网络分层结构计算机网络分层结构指将计算机网络的功能划分为多个层次，每个层次都有其特定的功能和协议，并且层次之间通过接口进行通信。分层设计的优势： 模块化：各层独立发展（如IPv4→IPv6&#xff0c…...

编程日记 2025/9/13 21:39:31

[Web 安全] 反序列化漏洞 - 学习笔记

关注这个专栏的其他相关笔记：[Web 安全] Web 安全攻防 - 学习手册-CSDN博客 0x01：反序列化漏洞 — 漏洞介绍反序列化漏洞是一种常见的安全漏洞，主要出现在应用程序将序列化数据重新转换为对象（即反序列化）的过程中…...

编程日记 2025/9/8 20:28:57

每日一题——字母异位词分组

字母异位词分组 1. 问题描述示例提示 2. 解题思路具体步骤 3. 代码实现4. 代码解析（1）排序法（2）哈希表存储（3）动态内存分配（4）释放内存1. HASH_FIND_STR 的作用2. 宏的定义4. 详细解…...

编程日记 2025/9/8 13:27:15

力扣 807. 保持城市天际线(Java实现)

题目分析给定一个二维数组，行列长度相等，要保持四个方向仍一观察高度不变的情况下，适当添加建筑高度，问最大高度增量和。所谓四个方向高度不变的增量，其实就是arr[i][j]与同i行最大值同j列最大值之间的最小值的差&…...

编程日记 2025/9/14 8:23:07

【视频2 - 4】初识操作系统，Linux，虚拟机

📝前言说明： ●本专栏主要记录本人的基础算法学习以及LeetCode刷题记录，主要跟随B站博主灵茶山的视频进行学习，专栏中的每一篇文章对应B站博主灵茶山的一个视频 ●题目主要为B站视频内涉及的题目以及B站视频中提到的“课后作业”。…...

编程日记 2025/9/13 6:24:09

重启securecmd失败

重启securecmd失败问题描述：KES集群部署工具中，节点管理里新增节点下一步报错无法检查securecmd端口进程情况，安装依赖包后再次下一步提示如下报错： 解决办法： [rootlocalhost cluster]# cd /home/kingbase/cluster…...

编程日记 2025/9/8 16:42:07

python学习四

python运算符与表达式表达式： Python中的表达式是一种计算结果的代码片段。它可以包含变量、运算符、常数和函数调用，用于执行各种数学、逻辑和功能操作算术运算符：比较（关系）运算符：赋值运算符：逻辑运算符：位运算符：成员运算符：身份运算符 <...

编程日记 2025/9/8 12:15:24

LeetCode 236.二叉树的最近公共祖先

题目： 给定一个二叉树, 找到该树中两个指定节点的最近公共祖先。百度百科中最近公共祖先的定义为：“对于有根树 T 的两个节点 p、q，最近公共祖先表示为一个节点 x，满足 x 是 p、q 的祖先且 x 的深度尽可能大（一个节…...

编程日记 2025/9/10 13:17:14

react 中，使用antd layout布局中的sider 做sider的展开和收起功能

一话不多说，先展示效果： 展开时： 收起时： 二、实现代码如下 react 文件 import React, {useState} from react; import {Layout} from antd; import styles from "./index.module.less"; // 这个是样式文件&#…...

编程日记 2025/9/10 18:51:02

2025-02-26 学习记录--C/C++-C语言整数格式说明符

合抱之木，生于毫末；九层之台，起于累土；千里之行，始于足下。💪🏻 C语言整数格式说明符【例如】🎀 ：在 C 语言中，%ld 是 printf 或 scanf 等格式化输入输出函…...

编程日记 2025/9/8 11:57:54

绕过过滤order by

一、常见绕过技术 1、注释符截断利用注释符（如 --、#）截断后续查询，消除过滤逻辑的影响。 ORDER BY 1-- 若原查询为 SELECT * FROM table ORDER BY 用户输入，注入后可能忽略后续过滤逻辑。 2、大小写混淆/编码绕过若过滤是大…...

编程日记 2025/9/10 1:10:44

NLP09-加强1-对比SVM

支持向量机（SVM） （一）导入 SVM 相关库 （二） 修改模型初始化 （三） 比较朴素贝叶斯分类器 SVM分类器支持向量机（SVM） 代码修改基于NLP09-朴素贝叶斯问句…...

编程日记 2025/9/10 19:59:58

STM32——HAL库开发笔记22（定时器3—呼吸灯实验）（参考来源：b站铁头山羊）

本文利用前几节所学知识来实现一个呼吸灯实验：两颗led灯交替呼吸。一、STM32CubeMX配置 step1：配置调试接口 step2：配置定时器定时器1位于APB2总线上，如上图所示。 step3：配置时基单元按照下图配置时钟来源配置…...

编程日记 2025/9/11 17:30:57

Vue3+TypeScript 封装一个好用的防抖节流自定义指令

一、前言：为什么需要防抖节流？ 在前端开发中，高频触发的事件（如滚动、输入、点击等）容易导致性能问题。防抖（debounce） 和节流（throttle） 是两种常用的优化手段&#x…...

编程日记 2025/9/14 8:25:38

2025年中国最新安防行业数字安全现状与未来趋势：内生安全成核心共识，从零基础到精通，收藏这篇就够了！

本次，我将为大家剖析由**安奇信发布的《中国安防行业数字安全建设与发展情况白皮书**》。该报告共_37_页，涵盖了众多重要信息和核心论点。若您希望深入了解，请参阅原报告，获取方法已在文档的最后部分提供。报告核心内容随着数字…...

编程日记 2025/9/10 5:36:58

项目管理的新理念主要有哪些

随着时代的发展和市场需求的变化，项目管理的理念也在不断地创新和演变。项目管理的新理念包括敏捷管理、精益管理、知识管理、变革管理、协作式管理和项目生命周期管理等。这些新理念不仅能够提高项目的管理效率，还能帮助团队在复杂的环境中更好地应对挑…...

编程日记 2025/9/10 14:27:31

Spring如何解决循环依赖？

一、Spring的三级缓存关键就是提前暴露未完全创建完毕的Bean。三级缓存来解决循环依赖： 一级缓存：用于存储完全初始化完成的单例Bean。二级缓存：用于存储尚未完全初始化，但已实例化的Bean，用于提前暴露对象&#x…...

编程日记 2025/9/8 18:55:29

vscode java环境中文乱码的问题

先说我的结论： 由于我的系统是windows的，所以vscode使用的是默认gbk的编码进行的。但是我的目的是全部都使用utf-8，因为我的程序始终是要去linux上去运行的，总不能在本地是好的，然后到服务器上就不行了吧，…...

编程日记 2025/9/8 19:10:01

十、大数据资源平台功能架构

一、大数据资源平台的功能架构图总体结构大数据资源平台功能架构图关键组件： 1.用户（顶行） 此部分标识与平台交互的各种利益相关者。其中包括： 市领导各部门分析师区政府外部组织公民开发人员运营经理 2.功能模…...

编程日记 2025/9/14 13:42:08

OpenEuler学习笔记（三十五）：搭建代码托管服务器

以下是主流的代码托管软件分类及推荐，涵盖自托管和云端方案，您可根据团队规模、功能需求及资源情况选择： 一、自托管代码托管平台（可私有部署） 1. GitLab 简介: 功能全面的 DevOps 平台，支持代码托管、C…...

编程日记 2025/9/10 4:41:13

使用Spring AI调用Ollama的DeepSeek模型实现结构化输出

在 Docker 环境中部署 Ollama 并使用 Spring AI 框架实现结构化输出，你可以按照以下步骤进行操作： 1. 部署 Ollama 模型首先，需要在 Docker 中部署 Ollama 并下载 deepseek-r1:1.5b 模型。 1.1 准备部署文件 version: 3.8services:ollam…...

编程日记 2025/9/14 18:04:32

微信小程序调用火山方舟（字节跳动火山引擎）中的DeepSeek大模型

微信小程序的轻量化特性与DeepSeek大模型的AI能力结合，可快速构建智能问答、内容生成等场景化服务。通过火山方舟平台提供的标准化接口，开发者无需深入算法细节即可调用模型能力。一、注册火山引擎账号，创建API Key和model（接入…...

编程日记 2025/9/9 3:17:13

threejs:射线拾取封装

射线拾取封装代码： import * as THREE from three; // 点击事件// 1.坐标转化(鼠标单击的屏幕坐标转标准设备坐标)// 2.射线计算(通过鼠标单击位置相机参数计算射线值)// 3.射线交叉计算// ObjectsArr是用来做射线拾取的对象数组，一个二维数组 export f…...

编程日记 2025/9/14 10:56:23

2024年国赛高教杯数学建模D题反潜航空深弹命中概率问题解题全过程文档及程序

2024年国赛高教杯数学建模 D题反潜航空深弹命中概率问题原题再现应用深水炸弹（简称深弹）反潜，曾是二战时期反潜的重要手段，而随着现代军事技术的发展，鱼雷已成为现代反潜作战的主要武器。但是，在海峡或…...

编程日记 2025/8/27 1:35:00

爬虫框架与库

爬虫框架与库是用于网络数据抓取的核心工具，帮助开发者高效地从网页中提取结构化数据。 Requests：用于发送HTTP请求。 BeautifulSoup：用于解析HTML和XML。 Scrapy：强大的爬虫框架，适合大规模爬取。 Selenium&#…...

编程日记 2025/9/10 12:32:19

从电子管到量子计算：计算机技术的未来趋势

计算机发展的历史自古以来人类就在不断地发明和改进计算工具，从结绳计数到算盘，计算尺，手摇计算机，直到1946年第一台电子计算机诞生，虽然电子计算机至今虽然只有短短的半个多世纪，但取得了惊人的发展吗，已经经历了五代的变革。计算机的发展和电子技术的发展密切相关，…...

编程日记 2025/9/11 3:08:38

LeetCode 15.三数之和

15.三数之和给你一个整数数组 nums ，判断是否存在三元组 [nums[i], nums[j], nums[k]] 满足 i ! j、i ! k 且 j ! k ，同时还满足 nums[i] nums[j] nums[k] 0 。请你返回所有和为 0 且不重复的三元组。注意：答案中不可以包含重复的三元组…...

编程日记 2025/9/14 13:48:54

c#笔记-基础知识

目录整数浮点 decimal bool 引用 object string 值枚举关键字 enum 类型转换隐式转换编辑显式转换装箱，拆箱常量表达式编辑字符串的使用比较字符串字符格式化编辑截取字符串字符串的分割插入字符串删除字符串 …...

编程日记 2025/9/5 21:34:00

el-table fixed滚动条被遮挡导致滚动条无法拖动

/* 设置默认高度-滚动条高度 */ .el-table__fixed { height: calc(100% - 16px) !important; } .el-table__fixed:before { height: 0px; }...

编程日记 2025/8/16 10:54:42

如何在个人电脑本地部署Deepseek大模型？Windows10 + Ollama+Deepseek+ChatBox

第一阶段：下载并安装Ollama 1，打开浏览器，进入 Ollama 官方网站 2，点击“Download”，在新页面选择“Windows”，再点击“Download for Windows”。 3，下载完成后，在文件名&#xff0…...

编程日记 2025/9/10 8:02:15

链表题（）

1、环形列表 141 方法一、卡节点数量，或者值范围的bug 方法二、快慢指针（最实用）寻找环 /*** Definition for singly-linked list.* struct ListNode {* int val;* ListNode *next;* ListNode(int x) : val(x), next(NUL…...

编程日记 2025/9/9 14:28:59

ZIP64扩展和普通ZIP文件有什么区别？

ZIP64扩展是ZIP文件格式的一个扩展，旨在解决传统ZIP格式的限制，尤其是文件大小和数量的限制。以下是ZIP64扩展与普通ZIP文件的主要区别： 1. 文件大小限制普通ZIP文件： 单个文件大小限制为 4GB（2^32字节）。…...

编程日记 2025/9/9 13:08:59

smolagents学习笔记系列（五）Tools-in-depth-guide

这篇文章锁定官网教程中的 Tools-in-depth-guide 章节，主要介绍了如何详细构造自己的Tools，在之前的博文 smolagents学习笔记系列（二）Agents - Guided tour 中我初步介绍了下如何将一个函数或一个类声明成 smolagents 的工具&…...

编程日记 2025/9/11 21:20:07

使用 Apache Dubbo 释放 DeepSeek R1 的全部潜力

作者：陈子康，Apache Dubbo Contributor 2025年1月20日，国产大模型公司深度求索（DeepSeek）正式发布了大语言模型 DeepSeek-R1，并同步开源其模型权重。通过大规模强化学习技术，DeepSeek-R1 显著提…...

编程日记 2025/9/11 17:04:33

【星云 Orbit-F4 开发板】03b. 按键玩法二：独立按键双击双击触发

【星云 Orbit-F4 开发板】03b. 按键玩法二：独立按键双击触发引言在嵌入式系统中，按键是常用的输入设备。通过检测按键的状态变化，可以实现多种功能，例如单击、双击、长按等。本文将详细介绍如何使用STM32F103的GPIO引脚检测独…...

编程日记 2025/9/9 15:46:40

大白话Vuex 核心概念（state、mutations、actions）的使用案例与原理

state

mutations

actions

相关文章：