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

vuex 作用及五大组成部分

news 来源：原创 2025/6/26 12:12:11

Vuex 是 Vue.js 的官方状态管理库，旨在帮助开发者构建大型应用时更好地管理和共享全局状态。它提供了一种集中式存储和管理应用所有组件的状态的方式，并且遵循单一状态树的原则。通过 Vuex，可以更容易地实现状态的可预测性和调试。

一、Vuex 的作用

  1. 集中管理状态：Vuex 提供了一个单一的地方来存储应用的所有状态，使得状态管理更加清晰和易于维护。
  2. 状态持久化：确保不同页面或组件之间共享的状态能够保持一致。
  3. 异步操作处理：提供了处理异步操作的标准方式，如API请求，保证了状态更新的顺序性。
  4. 调试友好：由于所有的状态变更都是显式发生的，这使得应用程序更易于调试。
  5. 模块化开发：支持将状态逻辑分割成多个模块，每个模块都可以拥有自己的 state、mutation、action 和 getter，从而简化复杂应用的开发。

二、Vuex 的五大组成部分

  1. State：

    • 存储应用的状态数据。它是 Vuex Store 中最基础的部分，相当于组件中的 data 属性。
    • 示例：state.count = 0;

  2. Getters：

    • 类似于 Vue 组件中的计算属性，用于从 state 中派生出一些状态，或者对 state 进行加工处理后返回。
    • 可以理解为是带有逻辑处理的“只读”状态访问器。
    • 示例：getters.doubleCount = (state) => state.count * 2;

  3. Mutations：

    • 修改 state 的唯一方法。必须是同步函数，接收 state 作为第一个参数。
    • Mutations 需要被显式地提交（commit），并且应当尽量保持简单，仅做状态变更而不包含业务逻辑。
    • 示例：mutations.increment(state) { state.count++; }

  4. Actions：

    • 类似于 mutations，但不同之处在于：
      • Actions 提交的是 mutations，而不是直接改变 state。
      • Actions 可以包含任意异步操作。
      • Actions 可以通过 store.dispatch() 方法触发。
    • 示例：actions.incrementAsync({ commit }) { setTimeout(() => commit('increment'), 1000); }

  5. Modules：

    • Vuex 允许我们将 store 分割成模块（modules）。每个模块都有自己的 state、mutation、action 和 getter。
    • 模块化有助于组织代码结构，特别是当应用变得非常大时。
    • 模块内部还可以再细分为子模块，形成多层嵌套的模块结构。
    • 示例： 
      const moduleA = {state: () => ({ ... }),mutations: { ... },actions: { ... },getters: { ... }
};

相关文章：

vuex 作用及五大组成部分

Vuex 是 Vue.js 的官方状态管理库，旨在帮助开发者构建大型应用时更好地管理和共享全局状态。它提供了一种集中式存储和管理应用所有组件的状态的方式，并且遵循单一状态树的原则。通过 Vuex，可以更容易地实现状态的可预测性和调试。 一、Vuex…...

编程日记 2025/6/26 12:12:11

Centos7上Jenkins+Docker+Git+SpringBoot自动化部署

文章目录 1.宿主机安装maven2.安装jenkins3.配置Jenkins4.Jenkins脚本自动安装JDK（可选） 1.宿主机安装maven wget https://dlcdn.apache.org/maven/maven-3/3.9.9/binaries/apache-maven-3.9.9-bin.tar.gz mv apache-maven-3.9.9-bin.tar.gz /usr/local…...

编程日记 2025/6/26 11:41:21

MATLAB图卷积神经网络GCN处理分子数据集节点分类研究

全文链接：https://tecdat.cn/?p38570 本文主要探讨了如何利用图卷积网络（GCN）对图中的节点进行分类。介绍了相关的数据处理、模型构建、训练及测试等环节，通过对分子数据集的操作实践，展示了完整的节点分类流程&#…...

编程日记 2025/6/25 15:52:16

高级Python游戏开发：创建一款多人对战坦克大战

在本教程中，我们将用Python的Pygame库开发一款高级的坦克大战游戏。这款游戏支持多人对战、碰撞检测、子弹射击以及地图障碍生成，适合作为学习Python高级游戏开发的练习项目。 一、游戏功能概述 多人对战模式：玩家可以操作坦克，在同一屏幕上互相攻击。子弹射击：坦克可以发…...

编程日记 2025/6/26 11:13:37

网站访问的基础-HTTP超文本传输协议

BS架构 浏览器Browser⬅➡服务器Server 浏览器和服务器之间通过 IP 地址进行通信，实现数据的请求和传输。 例如，当用户在浏览器中访问一个网站时，浏览器会根据用户输入的网址（通过 DNS 解析得到服务器 IP 地址）向服…...

编程日记 2025/6/25 21:11:13

使用Hydra库简化配置管理

使用Hydra库简化配置管理 简介 在现代软件开发中，配置管理是至关重要的。应用程序的灵活性和可维护性很大程度上取决于其如何处理配置。Hydra是一个由Facebook AI Research (FAIR) 开发的Python库，它旨在简化复杂应用的配置过程。Hydra使得开发者可以轻…...

编程日记 2025/6/26 12:08:10

Java对集合的操作方法

1. 数组转集合 //数组转集合 String[] split quickRechargeAmount.split(","); List<String> stringList Stream.of(split).collect(Collectors.toList()); 2. 对List集合数据内容进行分组 //对List集合数据内容进行分组 Map<String, List<LiveAppGi…...

编程日记 2025/6/26 11:27:48

WordPress酱茄主题 开源版 博客资讯自媒体网站模板

一款免费开源的WordPress主题&#xff0c;主题专为WordPress博客、资讯、自媒体网站而设计 运行环境 支持WordPress版本&#xff1a;5.6 兼容Chrome、Firefox、Safari等主流浏览器 支持设备&#xff1a;响应式布局&#xff0c;不同设备不同展示效果 服务器环境建议&#x…...

编程日记 2025/6/26 11:15:23

【SickOs1.1靶场渗透】

文章目录 一、基础信息 二、信息收集 三、反弹shell 四、提权 一、基础信息 Kali IP&#xff1a;192.168.20.146 靶机IP&#xff1a;192.168.20.150 二、信息收集 端口扫描 nmap -sS -sV -p- -A 192.168.20.150 开放了22、3128端口&#xff0c;8080端口显示关闭 22端…...

编程日记 2025/6/26 11:16:59

Javaweb web后端maven介绍作用安装

自动导入到这个项目 src是源代码 main主程序&#xff0c;核心代码 java是Java源代码 resources是项目配置文件 test测试相关的 maven概述 介绍 依赖在本地仓库查找&#xff0c;如果本地仓库有&#xff0c;用本地仓库的依赖&#xff0c;本地没有&#xff0c;连接中央仓库&…...

编程日记 2025/6/26 11:23:25

Input Action (输入动作) 在虚幻引擎中常用的值类型

1. Digital (bool) 含义: Digital 类型代表一个离散的、二元的输入状态，它只有两种可能的值：true（按下，激活）或 false（未按下，未激活）。 用途: 最常用于表示按键或按钮的按下状态。 适合于开关类型的操作，比如： 跳跃（按键按下时跳跃，松开时不跳跃） 奔跑/行走切换 …...

编程日记 2025/6/26 11:52:44

LabVIEW汽车综合参数测量

系统基于LabVIEW虚拟仪器技术&#xff0c;专为汽车带轮生产中的质量控制而设计&#xff0c;自动化测量和检测带轮的关键参数。系统采用PCIe-6320数据采集卡与精密传感器结合&#xff0c;能够对带轮的直径、厚度等多个参数进行高精度测量&#xff0c;并通过比较测量法判定产品合…...

编程日记 2025/6/24 4:54:57

快速且靠谱的简单安装 PostgreSQL 15 yum 安装postgis3.3

快速且靠谱的简单安装 PostgreSQL 15 yum 安装postgis3.3 1、确保已经安装了PostgreSQL数据库。2、添加PostGIS的EPEL仓库3、使用YUM安装PostGIS4、以下为其他安装方式&#xff0c;一个个去找源码的编译安装&#xff0c;过程较为繁琐&#xff08;不熟路的不推荐&#xff09; 要…...

编程日记 2025/6/26 9:05:28

MySQL八股文

MySQL 自己学习过程中的MySQL八股笔记。 主要来源于 小林coding 牛客MySQL面试八股文背诵版 以及b站和其他的网上资料。 MySQL是一种开放源代码的关系型数据库管理系统&#xff08;RDBMS&#xff09;&#xff0c;使用最常用的数据库管理语言–结构化查询语言&#xff08;SQL&…...

编程日记 2025/6/26 11:26:28

Python高性能web框架-FastApi教程：(1)创建一个简单的FastApi

&#xff08;1&#xff09;创建一个简单的FastApi 1. 导入必要的库 from fastapi import FastAPI import uvicornFastAPI 是一个用于构建现代、快速&#xff08;高性能&#xff09;的Web API的Python框架。uvicorn 是一个ASGI服务器&#xff0c;用于运行异步的Python Web应用…...

编程日记 2025/6/26 11:15:22

多模态机器学习综述论文|Multimodal Machine Learning: A Survey and Taxonomy

1. 引言 多模态机器学习是一个跨学科领域&#xff0c;它涉及到从多种感官模态&#xff08;如视觉、听觉、触觉等&#xff09;中提取信息&#xff0c;并构建能够处理和关联这些信息的模型。这种学习方式对于人工智能理解复杂世界至关重要。 名词解释&#xff1a; 模态Modality…...

编程日记 2025/6/26 11:21:51

CentOS8：英伟达显卡驱动与CUDA安装

挺偶然的&#xff0c;同事在CentOS8版本的GPU服务器上安装英伟达的显卡驱动和CUDA遇到了问题&#xff0c;于是协助进行了安装&#xff0c;顺便记录下此次安装过程与心得。 目录 显卡驱动安装 步骤简述 详细步骤 1、官网下载需要的驱动 2、驱动软件包上传并加权 3、安装…...

编程日记 2025/6/1 7:11:04

【IDEA】启动报错

今天启动IDEA报错 报错信息&#xff1a; Cannot connect to already running IDE instance. Exception: Process 5,444 is still running 打开任务管理器&#xff0c;关掉进程ID5444的任务...

编程日记 2025/6/26 11:21:51

Opencv之图像梯度处理和绘制图像轮廓

一、梯度处理的sobel算子函数 处理示意 Sobel 算子是一种常用的图像边缘检测方法&#xff0c;结合了一阶导数和高斯平滑&#xff0c;用于检测图像的梯度信息。 1、功能 Sobel 算子用于计算图像在 x 和 y 方向的梯度&#xff0c;主要功能包括&#xff1a; 强调图像中灰度值的…...

编程日记 2025/6/26 11:12:08

5.2章节python字符串的格式化三种方式

在Python中&#xff0c;格式化字符串是编程中常见的任务&#xff0c;它用于将变量或表达式的值嵌入到字符串中。以下是三种常见的格式化字符串的方式&#xff1a; 1.百分号&#xff08;%&#xff09;格式化&#xff1a; 这是Python早期版本中常用的字符串格式化方法。通过在字…...

编程日记 2025/6/24 4:28:14

.NET Core 各版本特点、差异及适用场景详解

随着 .NET Core 的不断发展&#xff0c;微软推出了一系列版本来满足不同场景下的开发需求。这些版本随着时间的推移逐渐演变为统一的 .NET 平台&#xff08;从 .NET 5 开始&#xff09;。本文将详细说明每个版本的特点、差异以及适用场景&#xff0c;帮助开发者更好地选择和使用…...

编程日记 2025/6/26 12:12:10

2024.12.14 TCP/IP 网络模型有哪几层?

2024.12.14 TCP/IP 网络模型有哪几层? 2024.12.14 今天周六 看到大伙都在考六级&#xff0c;我来复盘小林coding的计算机网络的知识点&#xff1a; TCP/IP 网络模型有哪几层? 问大家&#xff0c;为什么要有 TCP/IP 网络模型? 对于同一台设备上的进程间通信&#xff0c;有…...

编程日记 2025/6/26 11:29:32

基于SpringBoot的嗨玩旅游网站：一站式旅游信息服务平台的设计与实现

摘要 在旅游需求日益增长的今天&#xff0c;一个全面、便捷的旅游信息服务平台显得尤为重要。嗨玩旅游网站正是为了满足这一需求而设计的在线平台&#xff0c;它提供了包括景点信息、旅游线路、商品信息、社区信息和活动推广等在内的丰富旅游目的地信息&#xff0c;旨在帮助用…...

编程日记 2025/6/26 11:23:26

HQChart使用教程30-K线图如何对接第3方数据42-DRAWTEXTREL,DRAWTEXTABS数据结构

HQChart使用教程30-K线图如何对接第3方数据42-DRAWTEXTREL,DRAWTEXTABS数据结构 效果图DRAWTEXTREL示例数据结构说明nametypecolorDrawVAlignDrawAlignDrawDrawTypeDrawDataFont DRAWTEXTABS示例数据结构说明nametypecolorDrawVAlignDrawAlignDrawDrawTypeDrawDataFont 效果图 …...

编程日记 2025/6/26 11:11:42

VMware ESXi上创建Ubuntu虚拟机并实现远程SSH访问全攻略

文章目录 前言1. 在VMware ESXI中创建Ubuntu虚拟机2. Ubuntu开启SSH远程服务3. 安装Cpolar工具4. 使用SSH客户端远程访问Ubuntu5. 固定TCP公网地址 前言 本文主要介绍如何在VMware ESXi上创建一台Ubuntu 22.04虚拟机&#xff0c;并通过Cpolar内网穿透工具配置公网地址&#xf…...

编程日记 2025/6/26 11:36:17

进制的转换

前言 ‌进制‌是一种进位计数制&#xff0c;是人为定义的带进位的计数方法。不同的进制使用不同数量的符号&#xff0c;以及不同的规则来组合这些符号以表示不同的数值。 一、进制类型 二进制:由一串0和1组成的数字&#xff0c;逢二进一 八进制:0 1 2 3 4 5 6 7&#xff0c;…...

编程日记 2025/6/26 11:58:15

迁移学习中模型训练加速（以mllm模型为例），提速15%以上

根据模型训练过程的显存占用实测的分析，一个1g参数的模型（存储占用4g）训练大约需要20g的显存，其中梯度值占用的显存约一半。博主本意是想实现在迁移学习（冻结部分参数）中模型显存占用的降低，结果不太满意，只能实现训练速度提升，但无法实现显存占用优化。预计是在现有的…...

编程日记 2025/6/25 17:17:20

CSS系列（6）-- 排版与文本详解

前端技术探索系列&#xff1a;CSS 排版与文本详解 &#x1f4dd; 致读者&#xff1a;探索优雅的文字艺术 &#x1f44b; 前端开发者们&#xff0c; 今天我们将深入探讨 CSS 排版与文本处理&#xff0c;学习如何创建既美观又易读的文本内容。 文本基础属性 &#x1f680; 字…...

编程日记 2025/6/25 13:38:53

嵌入式现状、机遇、挑战与展望

在当今数字化浪潮中&#xff0c;嵌入式系统宛如一颗璀璨的明珠&#xff0c;熠熠生辉&#xff0c;深刻地渗透到了我们生活的方方面面&#xff0c;成为推动现代科技进步不可或缺的关键力量。从智能家居的便捷控制&#xff0c;到工业生产的精准运作&#xff0c;再到汽车的智能驾驶…...

编程日记 2025/6/26 11:10:56

关于Postgresql旧版本安装

抛出问题 局点项目现场&#xff0c;要求对如下三类资产做安全加固&#xff0c;需要在公司侧搭建测试验证环境&#xff0c;故有此篇。 bclinux 8.2 tomcat-8.5.59 postgrel -11 随着PG迭代&#xff0c;老旧版本仅提供有限维护。如果想安装老版本可能就要费劲儿一些。现在&…...

编程日记 2025/6/26 4:41:31

【AI日记】24.12.14 kaggle 比赛 2-4 EDA

【AI论文解读】【AI知识点】【AI小项目】【AI战略思考】【AI日记】 工作 参加&#xff1a;kaggle 比赛 Regression with an Insurance Dataset内容&#xff1a;构建自己的EDA&#xff08;探索性数据分析&#xff09;框架时间&#xff1a;5 小时感想&#xff1a;大规模数据集&a…...

编程日记 2025/6/24 17:27:44

《深入浅出HTTPS》读书笔记（18）：公开密钥算法RSA（续）

【RSA算法安全性】 幂运算的逆过程就是求对数问题&#xff0c;而模运算可以认为是离散问题&#xff0c;组合起来RSA算法就是离散对数模型&#xff0c;只要密钥长度足够长&#xff0c;离散对数很难破解。 破解私钥有两个方法&#xff1a; ◎公钥持有人有e和n&#xff0c;而要计…...

编程日记 2025/6/23 12:15:14

LabVIEW面向对象编程有什么特点？

LabVIEW面向对象编程&#xff08;OOP&#xff09;的特点主要体现在它如何结合传统面向对象编程&#xff08;OOP&#xff09;的理念与LabVIEW的图形化编程模式&#xff0c;提供灵活的抽象和模块化的功能。以下是LabVIEW面向对象编程的几个主要特点&#xff1a; ​ 1. 类&#x…...

编程日记 2025/6/26 11:59:56

【Hive数据仓库】Hive部署、Hive数据库操作（增删改查）、表操作（内部表、外部表、分区表、桶表）

目录 一、本地模式 1、安装MySQL 2、登录MySQL 3、修改密码 4、安装Hive 5、配置Hive系统环境变量 6、初始化Derby数据库 7、连接Hive用于测试 8、测试Hive 9、修改Hive配置文件 10、上传MySQL驱动包 11、初始化MySQL 12、连接Hive用于启动服务 二、远程模式 1、…...

编程日记 2025/6/22 23:33:55

bugku-simple MQTT-wp解析

1.下载题目打开题目&#xff0c;是一个流量包&#xff0c;题目说是MQTT&#xff0c;然后打开流量之后的流量都是MQTT&#xff0c;我们来搜一下MQTT是什么流量 MQTT流量&#xff1a; 是一种基于发布订阅模式的轻量级的通讯协议&#xff0c;并且该协议构建于TCP/IP协议之上&…...

编程日记 2025/6/26 11:26:27

【第四节】Git 分支管理

目录 前言 一、Git 分支简介 二、 分支的基本操作 2.1 创建分支 2.2 切换分支 2.3 列出分支 三、 分支的合并与删除 3.1 合并分支 3.2 删除分支 四、处理合并冲突 五、 总结 前言 Git 的分支管理是其核心功能之一&#xff0c;允许开发者在不影响主线开发的情况下进行…...

编程日记 2025/6/25 21:09:59

IDEA 修改格式化仅格式化本次改动代码

最近总是发现格式化的时候会格式化文件所有代码&#xff0c;提交Git 后再看提交日志&#xff0c;就很不清晰。修改方式如下 中文&#xff1a; 格式化代码快捷键[中文配置]&#xff1a; 英文&#xff1a; 格式化代码快捷键[英文配置]&#xff1a;...

编程日记 2025/6/3 15:36:41

UOB大华银行｜校招网申综合能力SHL测评题库英语版本真题分析

大华银行有限公司&#xff08;大华银行&#xff09;是亚洲银行业的翘楚&#xff0c;大华银行总部位于新加坡&#xff0c;并在中国、印度尼西亚、马来西亚、泰国及越南设立了全资法人银行&#xff0c;在全球拥有约500 间分行及办事处&#xff0c;分布在亚太、欧洲与北美的19 个国…...

编程日记 2025/6/25 19:53:21

Redis应用—2.在列表数据里的应用

大纲 1.基于数据库 缓存双写的分享贴功能 2.查询分享贴列表缓存时的延迟构建 3.分页列表惰性缓存方案如何节约内存 4.用户分享贴列表数据按页缓存实现精准过期控制 5.用户分享贴列表的分页缓存的异步更新 6.数据库与缓存的分页数据一致性方案 7.热门用户分享贴列表的分…...

编程日记 2025/6/24 19:25:13

【Linux基础】基本开发工具的使用

目录 一、编译器——gcc/g的使用 gcc/g的安装 gcc的安装&#xff1a; g的安装&#xff1a; gcc/g的基本使用 gcc的使用 g的使用 动态链接与静态链接 程序的翻译过程 1. 一个C/C程序的构建过程&#xff0c;程序从源代码到可执行文件必须经历四个阶段 2. 理解选项的含…...

编程日记 2025/6/23 23:11:33

C++ 中面向对象编程如何实现动态绑定？

在 C 中&#xff0c;面向对象编程的一个重要特性就是动态绑定。动态绑定允许在程序运行时根据对象的实际类型来决定调用哪个函数&#xff0c;这为程序的灵活性和可扩展性提供了强大的支持。本文将详细介绍 C 中面向对象编程如何实现动态绑定。 一、静态绑定与动态绑定的概念 静…...

编程日记 2025/6/23 13:49:41

电源芯片的SYNC引脚

-----本文简介----- 主要内容包括&#xff1a; ① 电源芯片的SYNC引脚 ----- 正文 ----- 先赞↓后看&#xff0c;养成习惯&#xff01; 1. SYNC引脚是什么&#xff1f; 电源芯片里面的SYNC引脚是 Synchronization clock in&#xff0c;意思是同步时钟输入。 2. SYNC引脚的作用…...

编程日记 2025/6/21 12:33:03

安卓报错Switch Maven repository ‘maven‘....解决办法

例如&#xff1a;Switch Maven repository ‘maven(http://developer.huawei.com/repo/)’ to redirect to a secure protocol 在库链接上方添加配置代码&#xff1a;allowInsecureProtocol true...

编程日记 2025/6/1 9:22:59

935. 骑士拨号器

935. 骑士拨号器 题目链接&#xff1a;935. 骑士拨号器 代码如下&#xff1a; class Solution { public:int knightDialer(int n) {if (n 1){return 10;}long long res 0;for (int j 0; j < 10; j){res dfs(n - 1, j);}return res % MOD;}int dfs(int i, int j){if (…...

编程日记 2025/6/21 1:59:07

linux下的posix信号量

目录 引言 信号量背景知识 PV操作 信号量接口 基于环形队列的PC模型 代码实现 demo模型 具体实现 引言 在多线程编程领域&#xff0c;同步机制是确保数据一致性和避免竞态条件的关键技术。Linux操作系统作为开源软件的杰出代表&#xff0c;提供了多种同步原语&#xf…...

编程日记 2025/6/24 19:38:40

【JavaWeb后端学习笔记】Spring框架下的Bean管理

Bean 1、Bean的获取2、Bean的作用域3、第三方Bean 1、Bean的获取 默认情况下&#xff0c;Spring项目启动时&#xff0c;会把Bean创建好交给IOC容器管理。当需要使用时&#xff0c;通过Autowired注解注入或者通过构造方法注入即可。 除此之外还可以通过Spring提供的Applicatio…...

编程日记 2025/6/25 5:50:44

如何在 ASP.NET Core 3.1 应用程序中使用 Log4Net

介绍 日志记录是应用程序的核心。它对于调试和故障排除以及应用程序的流畅性非常重要。 借助日志记录&#xff0c;我们可以对本地系统进行端到端的可视性&#xff0c;而对于基于云的系统&#xff0c;我们只能提供一小部分可视性。您可以将日志写入磁盘或数据库中的文件&#xf…...

编程日记 2025/6/26 4:15:03

Photoshop提示错误弹窗dll缺失是什么原因？要怎么解决？

Photoshop提示错误弹窗“DLL缺失”&#xff1a;原因分析与解决方案 在创意设计与图像处理领域&#xff0c;Photoshop无疑是众多专业人士和爱好者的首选工具。然而&#xff0c;在使用Photoshop的过程中&#xff0c;有时会遇到一些令人头疼的问题&#xff0c;比如突然弹出的错误…...

编程日记 2025/6/20 12:56:34

mall-admin-web开源项目搭建教程（图文）

本章教程，介绍如何在本地部署运行mall-admin-web这个开源项目。 开源地址：https://gitee.com/macrozheng/mall-admin-web mall-admin-web是一个电商后台管理系统的前端项目，基于Vue+Element实现。主要包括商品管理、订单管理、会员管理、促销管理、运营管理、内容管理、统计…...

编程日记 2025/6/4 17:16:17

nginx做为文件服务器

docker-compose 创建nginx version: 3services:nginx-web:image: nginx:1.23.4container_name: nginx-webenvironment:# 时区上海TZ: Asia/Shanghaiports:- "88:80"- "443:443"volumes:# 证书映射- /home/dockerdata/nginx/cert:/etc/nginx/cert# 配置文件…...

编程日记 2025/6/22 16:45:19