vuex基础介绍
/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)/*** 创建并导出一个 Vuex 仓库实例* 仓库是一个存储应用所有状态的容器，并且提供了修改和获取状态的方法*/
export default new Vuex.Store({// state 是一个对象，用于存储应用的状态数据// 状态是响应式的，当状态发生变化时，所有依赖该状态的组件都会自动更新state: {// 定义具体的状态属性，例如：// count: 0},// getters 类似于计算属性，用于获取 state 中的数据并进行处理// 它们可以缓存计算结果，提高性能getters: {// 定义具体的 getter 函数，例如：// doubleCount: state => state.count * 2},// mutations 是唯一可以修改 state 的地方，它们是同步的// 每个 mutation 都是一个函数，接收 state 作为第一个参数，还可以接收一个可选的 payload 参数mutations: {// 定义具体的 mutation 函数，例如：// increment(state) {// state.count++// }},// actions 用于处理异步操作，如发送网络请求// 它们可以包含任意异步操作，并且通过提交 mutations 来修改 stateactions: {// 定义具体的 action 函数，例如：// incrementAsync({ commit }) {// setTimeout(() => {// commit('increment')// }, 1000)// }},// modules 用于将大型的 Vuex 仓库拆分成多个小模块// 每个模块有自己的 state、getters、mutations 和 actions// 这有助于组织和管理复杂的应用状态modules: {// 定义具体的模块，例如：// moduleA: {// state: { ... },// getters: { ... },// mutations: { ... },// actions: { ... }// }}
})
state用于存放数据。
- mutations：
mutations是唯一可以修改state的地方，并且它的操作必须是同步的。这是因为 Vuex 需要追踪state的变化，同步操作能保证状态变化的可预测性和调试的便利性。 - actions：
actions主要用于处理异步操作，例如发送网络请求、定时器操作等。它本身不能直接修改state，而是通过提交mutations来间接修改state。
每个 mutation 都是一个函数，接收 state 作为第一个参数，还可以接收一个可选的 payload 参数。
// /store/index.js中定义mutations和actions的方法：
import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({state () {return {loginStatus: '用户已登录',count: 0}},getters: {},mutations: {//同步操作，直接修改state值changeCount (state, num) {state.count += numconsole.log('mutation执行力，count值为', state.count)}},actions: {//异步操作，通过调用mutations中的方法来间接改变state值。delayChangeCount (store, num) {setTimeout(() => {store.commit('changeCount', num)}, 3000)}},modules: {}
})
触发或调用mutations方法时：function ( ) { this.$store.commit ('函数名', 参数) }
①mutations中函数要使用commit方法调用；而actions中函数使用dispatch方法调用
②mutations中定义时，除去state若是还有参数，才在使用时，在函数名之外传递参数
import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({state () {return {loginStatus: '用户已登录',count: 0}},getters: {len (state) {console.log('getters执行了')return state.loginStatus.length}},mutations: {changeCount (state, num) {state.count += numconsole.log('mutation执行力，count值为', state.count)}},actions: {delayChangeCount (store, num) {setTimeout(() => {store.commit('changeCount', num)}, 3000)}},modules: {}
})
getters相当于计算属性，具有缓存性
modules：vuex只有一个实例，但是modules可以分为比如：a、b等模块
modules: {a: {state,mutations,...},b: {state,mutations,...}也可以在modules中创建新的文件夹，创建a.js、b.js等文件，里面包含各自的state、mutations、actions等，并都进行export default
相关文章：
vuex基础介绍
/store/index.js import Vue from vue import Vuex from vuexVue.use(Vuex)/*** 创建并导出一个 Vuex 仓库实例* 仓库是一个存储应用所有状态的容器，并且提供了修改和获取状态的方法*/ export default new Vuex.Store({// state 是一个对象，用于存储应…...
OpenWRT中常说的LuCI是什么——LuCI介绍（一）
我相信每个玩openwrt的小伙伴都或多或少看到过luci这个东西，但luci到底是什么东西，可能还不够清楚，今天就趁机来介绍下，openwrt中的luci，到底是个什么东西。 什么是LuCI？ 首先，LuCI是OpenWRT中…...
singleTaskAndroid的Activity启动模式知识点总结
一. 前提知识 1.1. 任务栈知识 二. Activity启动模式的学习 2.1 standard 2.2 singleTop 2.3.singleTask 2.4.singleInstance 引言： Activity作为四大组件之一，也可以说Activity是其中最重要的一个组件，其负责调节APP的视图ÿ…...
DeepSeek-V3 技术报告
1.摘要 为了减少开源模型与闭源模型的能力差距，我们提出了DeepSeek-V3，一个大的混合专家模型（Mixture-of-Experts (MoE) ），有6710亿参数，每个token会激活370亿参数。 DeepSeek-V3采用多头隐注意力…...
Vue 3 30天精进之旅：Day 22 - 构建和部署
欢迎回来！在我们的Vue 3学习旅程的第22天，我们将探讨应用的构建和部署。在完成了我们的应用开发后，下一步就是如何将其部署到服务器，使得用户可以访问。 1. 构建Vue应用 构建Vue应用是将我们在本地开发的代码打包成生产环境可用…...
Ansible中Playbook的逻辑控制语句-when
playbook的逻辑控制语句 when 条件判断语句，类似if loop 循环语句，类似loop block 将几个任务组成一个代码块，便于针对一组操作的异常进行处理 when的基本用法 when的运算符操作 when关键字可以配合各种运算符进行操作，如下&…...
制造业物联网的十大用例
预计到 2026 年，物联网制造市场价值将达到 4000 亿美元。实时收集和分析来自联网物联网设备与传感器的数据，这一能力为制造商提供了对生产流程前所未有的深入洞察。物联网（IoT）有潜力彻底改变制造业，使工厂能够更高效地…...
InfiniBand与IP over InfiniBand（IPOIB）：实现高性能网络通信的底层机制
在现代高性能计算（HPC）和数据中心环境中，网络通信的效率和性能至关重要。InfiniBand（IB）作为一种高性能的串行计算机总线架构，以其低延迟、高带宽和高可靠性而广泛应用于集群计算和数据中心。IP over InfiniBand（IPOIB）则是在InfiniBand网络上实现IP协议的一种方式，它…...
【通俗易懂说模型】一篇弄懂几个经典CNN图像模型（AlexNet、VGGNet、ResNet）
🌈 个人主页：十二月的猫-CSDN博客 🔥 系列专栏： 🏀深度学习_十二月的猫的博客-CSDN博客 💪🏻 十二月的寒冬阻挡不了春天的脚步，十二点的黑夜遮蔽不住黎明的曙光 目录 1. 前言 2. …...
机器学习 | scikit-learn中分块拟合vs一次性拟合所有数据
Scikit-learn是一个广泛使用的机器学习Python库，提供了一系列分类、回归、聚类等算法。机器学习的关键挑战之一是处理无法一次性放入内存的大型数据集。本文探讨了使用scikit-learn将数据分块拟合与一次性拟合的策略，讨论了每种方法的优点和局限性。 大…...
两个同一对象targetList和 sourceList 去重
我现在需要解决的问题是从一个Java的源列表`sourceList`中移除所有在目标列表`targetList`中存在的数据，并且还要去除`targetList`中的重复数据。让我先理清楚这两个问题的思路。 首先，如何快速从`sourceList`中移除含有`targetList`的数据。这里的“含有”应该是指两个列表中…...
小游戏源码开发之可跨app软件对接是如何设计和开发的
专业小游戏开发的团队往往会面临跨领域和不同平台客户需要追加同一款游戏的需求，所以就要设计和开发一款可任意对接不同 App 软件的小游戏，那么针对这类需求小游戏开发团队早已有了成熟的解决方案，针对设计和开发可跨平台游戏对接大概流程简单…...
掌握正则表达式_模式匹配的艺术
当然，以下是《掌握正则表达式：模式匹配的艺术》文章内容，使用 Java 正则表达式，并包含丰富的代码示例： 1. 引言 1.1 正则表达式的定义与历史 正则表达式（Regular Expression，简称 regex 或 regexp）是一种用于描述文本模式的强大工具。它最初由数学家 Stephen Kleene…...
FacePoke详细使用指南：如何利用开源AI工具优化照片人物表情
文章目录 前言1. 本地使用FacePoke1.1 整合包方式安装1.2 Docker方式部署 2. FacePoke功能演示3. 公网使用FacePoke3.1 创建远程连接公网地址 4. 固定远程访问公网地址 前言 在数字创意的世界里，一款名为FacePoke的工具正以其风趣而强大的功能吸引着无数创作者的目…...
+openwebui/docker+openwebui)
本地部署【LLM-deepseek】大模型 ollama+deepseek/conda(python)+openwebui/docker+openwebui
通过ollama本地部署deepseek 总共两步 1.模型部署 2.[web页面] 参考官网 ollama:模型部署 https://ollama.com/ open-webui:web页面 https://github.com/open-webui/open-webui 设备参考 Mac M 芯片 windows未知 蒸馏模型版本:deepseek-r1:14b 运行情况macminim2 24256 本地…...
)
分发饼干(力扣455)
从这道题开始我们就进入贪心算法的学习了。这个算法没有固定的套路，甚至题目之间的联系也很少，基本上每一道题都要当新题来写。我们能做的只有见多识广，这样才有机会在考试中根据以往经验解决贪心的题目。贪心的本质上就是找到局部最优解&…...
信息收集-主机服务器系统识别IP资产反查技术端口扫描协议探针角色定性
知识点： 1、信息收集-服务器系统-操作系统&IP资产 2、信息收集-服务器系统-端口扫描&服务定性 一、演示案例-应用服务器-操作系统&IP资产 操作系统 1、Web大小写(windows不区分大小写，linux区分大小写) 2、端口服务特征(22就是linux上的服…...
建筑兔零基础自学python记录18|实战人脸识别项目——视频检测07
本次要学视频检测，我们先回顾一下图片的人脸检测建筑兔零基础自学python记录16|实战人脸识别项目——人脸检测05-CSDN博客 我们先把上文中代码复制出来，保留红框的部分。 然后我们来看一下源代码： import cv2 as cvdef face_detect_demo(…...
vue-点击生成动态值，动态渲染回显输入框
1.前言 动态点击生成数值，回显输入框，并绑定。 2.实现 <template><div style"display:flex;align-items: center;flex-direction:row"><a-input:key"inputKey"v-model"uploadData[peo.field]"placehold…...
Idea 插件 Quickly-Code-Toolkit
使用说明 （一）全局设置 Paging Wrapper Setting（分页设置） 功能：主要用于在方法写入时，为返回参数提供分页包装类。设置方式：需准确填写分页包装类的全限定名，例如：com…...
fun-transformer学习笔记-Task1——Transformer、Seq2Seq、Encoder-Decoder、Attention之间的关系
Transformer、Seq2Seq、Encoder-Decoder、Attention由这四者之间的关系可以从模型架构的发展脉络来理解： Seq2Seq 与 Encoder–Decoder 模型 “Seq2Seq”（sequence‐to‐sequence）是一类用于将一个变长序列映射为另一个变长序列的任务&#x…...
使用瑞芯微RK3588的NPU进行模型转换和推理
使用边缘设备进行算法落地时，通常要考虑模型推理速度，NVIDA系列平台可以使用TensorRT和CUDA加速，瑞芯微RK3588的板子上都是Arm的手机GPU，虽然没有类似CUDA的加速计算方式，但是提供了NPU进行加速推理，本文说…...
mysql读写分离与proxysql的结合
上一篇文章介绍了mysql如何设置成主从复制模式，而主从复制的目的，是为了读写分离。 读写分离，拿spring boot项目来说，可以有2种方式： 1）设置2个数据源，读和写分开使用 2）使用中间件…...
Vue笔记（九）
一、文章分类架子--PageContainer 学习PageContainer组件的封装，这一组件用于搭建页面基础结构，为后续内容展示提供统一布局。它可能包含通用的页面样式、导航栏、侧边栏等基础元素的结构搭建。 在Vue组件中， <template> 标签内定义基础…...
YOLO11框架使用
YOLO11 1. Frame Understanding2. What can YOLO11 do?3.如何训练自己数据集？3.1 配置环境3.2 制作自己数据集3.3 配置文件3.3.1 数据集配置文件3.3.2 网络模块配置文件4.修改训练参数配置文件5. 训练脚本编写6.结果展示1. Frame Understanding 2. What can YOLO11 do? Ult…...
RK3588视觉控制器与AI 算法：开启工业视觉检测新境界
在实际应用中，工业相机拍摄产品的图像，RK3588 迅速接收并进行预处理。AI 算法随即对图像进行深入分析，提取特征并与预设的标准进行对比，从而准确判断是否存在缺陷。 例如，在电子元件生产线上，RK3588 和 AI…...
C语言基础入门：2.5基础输入输出
【C语言基础】输入输出完全指南：从printf到缓冲区安全 文章目录 【C语言基础】输入输出完全指南：从printf到缓冲区安全一、格式化输出艺术：printf函数详解二、scanf输入安全与缓冲区处理三、字符级交互：getchar与putchar实战程序员…...
压缩stl文件大小
1、MeshLab下载界面，从MeshLab下载适合自己系统的最新版本。 2、打开 MeshLab软件，将stl文件拖入其中。 3、 4、Percentage reduction参数即为缩放比例，根据自身想要将文件压缩到多大来。 然后点击apply 5、CtrlE弹出窗口保存文件后&…...
二、交换机的vlan子设备接入
一、交换机的vlan设置-CSDN博客 二、交换机的vlan子设备接入-CSDN博客 接上篇的文章，本文接入了子设备 网络结构如下： 用路由器A和POE交换机B代替第一篇中的笔记本电脑，路由器A和交换机B都关闭DHCP服务，并分别接入一个IPC&#…...
KEPServerEX 的接口类型与连接方式的详细说明
目录 一、KEPServerEX 核心架构 二、KEPServerEX 支持的接口类型 三、KEPServerEX 支持的连接类型 1. 通用工业协议 2. 品牌专属协议 3. 行业专用协议 4. 数据库与文件接口 四、配置示例 1. 接口配置（以OPC UA为例） 2. 连接配置（以…...
)
Stack(栈)
定义：在Java编程语言中，栈(Stack)是一种非常重要的数据结构，具有后进先出的特性，即最后入栈的元素最先出栈。栈通常用于存储临时性的数据，如方法调用过程中的局部遍历、操作数栈等。 图像理解： 我们在这里要…...
【Vue3 Computed 与 Watch 维护对比】
让我们从开发体验和维护性的角度深入对比 computed 和 watch，通过具体场景分析它们的差异： 一、维护成本对比 1. 依赖管理差异 // 原始代码 const productFilter computed(() > {return products.value.filter((p) > p.price > minPrice.val…...
在node.js环境中使用web服务器http-server运行html静态文件
http-server http-server是一个超轻量级web服务器，它可以将任何一个文件夹当作服务器的目录供自己使用。 当我们想要在服务器运行一些代码，但是又不会配置服务器的时候，就可以使用http-server就可以搞定了。 使用方法 因为http-server需要…...
详解电子邮箱工作原理｜SMTP、POP3、IMAP、SPF、MIME
写在前面 电子邮件（Email）是一种通过互联网进行异步通信的技术，工作原理涉及多个协议、服务器和客户端协同工作。 接下来我们来介绍一下电子邮箱的工作原理 1. 电子邮件的核心组成部分 邮件客户端：用户直接交互的软件…...
算法学习笔记之并查集
简介 问题描述：将编号为1-N的N个对象划分为不相交集合，在每个集合中，选择其中的某个元素代表所在集合。 常见两种操作： 1.合并两个集合 2.查找某元素属于哪个集合 实现方法1 用编号最小的元素标记所在集合； 定义…...
【开源项目】ShowDoc适合IT团队的在线API文档、技术文档工具
1. 介绍 通过showdoc，可以方便地使用markdown语法来书写出美观的API文档、数据字典文档、技术文档、在线excel文档等等。还可以利用showdoc的自动化能力，从程序注释中自动生成API文档，或者从搭配的RunApi客户端（类似postman的api…...
Tomcat添加到Windows系统服务中，服务名称带空格
要将Tomcat添加到Windows系统服务中，可以通过Tomcat安装目录中“\bin\service.bat”来完成，如果目录中没有service.bat，则需要使用其它方法。 打到CMD命令行窗口，通过cd命令跳转到Tomcat安装目录的“\bin\”目录，然后执…...
SQL最佳实践（笔记）
写在前面： 之前baeldung的Java Weekly Reviews里面推荐了一篇关于SQL优化的文章，正好最近在学习数据库相关知识，记一些学习笔记 原文地址：SQL Best Practices Every Java Engineer Must Know 1. 使用索引 使用索引…...
历史性突破！DeepSeek双模型GitHub热度超OpenAI，展现中国AI力量
在2025年2月7日，中国AI领域传来了一则振奋人心的消息：DeepSeek旗下的两大开源项目在GitHub平台上实现了历史性突破，其Star数成功超越了OpenAI的明星项目。这一成就不仅标志着DeepSeek在技术研发和市场影响力上的重大飞跃，也为中国…...
deepseek+kimi一键生成PPT
1、deepseek生成大纲内容 访问deepseek官方网站：https://www.deepseek.com/ 将你想要编写的PPT内容输入到对话框，点击【蓝色】发送按钮，让deepseek生成内容大纲，并以markdown形式输出。 等待deepseek生成内容完毕后，…...
Java学习
一、赋值 赋值表达式，左边一定是变量，右边是变量或者数值，变量与数值都有类型，(数值里整数默认int,小数默认double) 类型由小转大，存储空间变大，数据不会丢失，是安全的，在需要时编译…...
Shell-基本命令与运算符
1.为什么要进行shell编程? 在Linux系统中，虽然有各种各样的图形化接口工具，但是shell仍然是一个非常灵活的 工具。 Shell不仅仅是命令的收集，而且是一门非常棒的编程语言。 您可以通过使用shell使大量的任务自动化， 因此&#…...
JUnit 5 自定义注解：方法级 JSON 参数注入
JUnit 5 自定义注解：方法级 JSON 参数注入 为了实现 在测试方法上使用注解，并通过注解属性指定参数名称和 JSON 字符串（转换为 Java 对象），以下是基于 JUnit 5 正确扩展接口的解决方案： 一、实现步骤 1. …...
anolis os 8.9安装jenkins
一、系统版本 # cat /etc/anolis-release Anolis OS release 8.9 二、安装 # dnf install -y epel-release # wget -O /etc/yum.repos.d/jenkins.repo https://pkg.jenkins.io/redhat-stable/jenkins.repo # rpm --import https://pkg.jenkins.io/redhat-stable/jenkins.…...
【CXX】0 Rust与C 互操作利器：CXX库介绍与示例
CXX库是一个非常强大的工具，它使得Rust和C之间的互操作性变得既安全又高效。本专栏将展示如何使用CXX库来桥接Rust和C代码，同时保持两者语言的特性和惯用法。 一、关键概念回顾 类型安全：CXX库通过静态分析类型和函数签名来保护Rust和C的不…...
tensorflow环境中已安装库
1. 深度学习课前准备工作 Anaconda3、TensorFlow和keras安装方法 1 下载Anaconda： Anaconda3-5.2.0-Windows-x86_64.exe 双击安装，选定环境变量 2 开始菜单打开Anaconda Prompt：（2、3、4有链接科学上网） 创建环境&am…...
构建现代微服务安全体系：Spring Security、JWT 与 Spring Cloud Gateway 实践
构建现代微服务安全体系：Spring Security、JWT 与 Spring Cloud Gateway 实践 本文将基于提供的代码示例，详细介绍如何在一个Java微服务项目中使用Spring Security、JWT和Spring Cloud Gateway来构建一个高效且安全的微服务体系，并整合性能优…...
蓝桥杯（B组）-每日一题（求最大公约数最小公倍数）
题目： 代码展现： #include<iostream> using namespace std; int main() {int m,n,x,y;cin>>m>>n;//输入两个整数int b;bm%n;//取余数xm;//赋值yn;while(b)//当余数不为0的时候{xy;//辗转相除求最小公约数yb;bx%y;}cout<<y<&…...
RocketMQ、RabbitMQ、Kafka 的底层实现、功能异同、应用场景及技术选型分析
1️⃣ 引言 在现代分布式系统架构中，📩消息队列（MQ）是不可或缺的组件。它在系统🔗解耦、📉流量削峰、⏳异步处理等方面发挥着重要作用。目前，主流的消息队列系统包括 🚀RocketMQ、&…...
)
CEF132编译指南 MacOS 篇 - 构建 CEF (六)
1. 引言 经过前面一系列的精心准备，我们已经完成了所有必要的环境配置和源码获取工作。本篇作为 CEF132 编译指南系列的第六篇，将详细介绍如何在 macOS 系统上构建 CEF132。通过配置正确的编译命令和参数，我们将完成 CEF 的构建工作…...