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

深入理解 Vuex：核心概念、API 详解与最佳实践

news 来源：原创 2025/9/19 10:10:29

Vuex 简介

Vuex 是 Vue.js 的官方状态管理库，专为复杂应用设计，用于集中管理所有组件的共享状态。它通过严格的规则确保状态变更的可预测性，并与 Vue 的响应式系统深度集成。

为什么需要 Vuex?

跨组件状态共享： 避免通过层层传递 props 或事件管理数据。
状态变更追踪： 通过 DevTools 实现时间旅行调试
异步操作管理： 统一处理 API 请求等异步任务

核心概念与工作流程

1.核心概念

概念	描述	特点	场景
State	存储应用状态（唯一数据源）	响应式，不可直接修改	用户登录信息、全局状态数据
Getters	从 State 派生的计算属性（类似组件 computed）	可缓存，依赖 State 变化	过滤后的列表
Mutation	同步修改 State 的方法（需要通过 commit 触发）	必须是同步函数	更新用户信息
Action	处理异步操作，最终通过提交 Mutations 修改 State （通过 dispatch 触发）	可包含任意异步操作	调用 API 获取数据后更新
Modules	将 store 分割为模块，每个模块拥有独立的 state、getters、mutations、actions	解决单一状态树臃肿问题	用户模块、商品模块

数据流示意图

组件 ->  dispatch -> actions -> commit -> mutations -> modify state -> 响应式更新视图

核心 API 详解

1、创建 Store

// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';Vue.use(Vuex);export default new Vuex.store({state:{ count: 0},getters: {doubleCount: state => state.count * 2},mutations: {increment(state, payload){state.count += payload.amount;}},actions: {asyncIncrement({ commit }, payload){setTimeout(()=>{commit('increment', payload)}, 1000);}}	
})

2、组件中访问 State 和 Getters

直接访问

this.$store.state.count;       // 访问 state
this.$store.getters.doubleCount;   // 访问 getter

辅助函数（推荐）

import { mapState, mapGetters } from 'vuex';export default {computed: {// 映射 this.count 为 this.$store.state.count...mapState(['count']),// 重命名或嵌套映射...mapState({customCount: state => state.count,user: state => state.user.profile}),// 映射 Getters...mapGetters(['doubleCount'])}
}

3、触发 Mutations 和 Actions
直接调用

// 提交 Mutation
this.$store.commit('increment', { amount: 18});// 分发 Action
this.$store.dispatch('asyncIncrement', { amount: 15})

辅助函数

import { mapMutations, mapActions } from 'vuex';export default {methods: {// 映射 this.increment() 为 this.$store.commit('increment')...mapMutations(['increment']),// 映射 Action...mapAction(['asyncIncrement']),// 重命名...mapAction({add: 'asyncIncrement'})}
}

4、高级 API

// 监听所有 Mutations 的执行，适用于日志记录或状态持久化
store.subscribeconst unsubscribe = store.subscribe((mutation, state) => {console.log(`Mutation 类型: ${mutation.type}`);console.log('Mutation 载荷:', mutation.payload);console.log('当前 State:', state);
})// 取消监听
unsubscribe()

// 监听 Action 的执行，适用于异步任务监控
store.subscribeActionconst unsubscribeAction = store.subscribeAction({before: (action, state) => { // Action 执行前 }after: (action, state) => { // Action 执行后 }
})

// 替换整个 State 树，常用于状态重置
store.replaceStatestore.replaceState({ count: 100})

模块化开发（modules）

1、模块化定义

// store/modules/user.js
export default {namespaced: true, // 启用命名空间state:() => ({ name: 'Guest'}),mutations:{setName(state, name){state.name = name;}},actions: {asyncFetchUser({ commit }){// 异步获取用户数据}}
}

2、注册模块

// store/index.js
import user from './modules/user';export default new Vuex.Store({modules: { user }
})

3、访问模块内容

// 访问模块 State
this.$store.state.user.name;// 辅助函数映射
...mapState('user',['name']),
...mapAction('user',['asyncFetchUser'])// 动态绑定模块名
...mapState({userName: (state) => state[this.moduleName].name
})

4、动态模块注册

// 注册模块
store.registerModule('dynamicModule', { // 模块配置 })// 卸载模块
store.unregisterModule('dynamicModule')

插件（Plugins）与扩展

1、内置插件 createLogger

import { createLogger } from 'vuex';const store = new Vuex.Store({plugins: [createLogger()],  // 开发环境使用
})

2、自定义插件示例（状态持久化）

const persistencePlugun = (store) => {// 初始化时读取本地存储const saveState = localStorage.getItem('vuex-state');if(saveState){store.replaceState(JSON.parse(saveState));}// 监听 mutations 自动自动保存store.subscribe((mutation, state) => {localStorage.setItem('vuex-state', JSON.stringify(state))})
}const store = new Vuex.Store({plugins: [persistencePlugun],  // 开发环境使用
})

高级技巧与最佳实践

1、严格模式

const store = new Vuex.Store({strict: process.env.NODE_ENV !== 'production', // 生产环境关闭// ...
});

2、表单处理

<input :value='message' @input='updateMessage'><script>
export default {computed:{message: {get() { return this.$store.state.message }set(value) { this.$store.commit('updateMessage', value)}}}
}

深入理解 Vuex：核心概念、API 详解与最佳实践

目录 Vuex 简介核心概念与工作流程核心 API 详解模块化开发 （modules）插件（Plugins）与扩展高级技巧与最佳实践 Vuex 简介 Vuex 是 Vue.js 的官方状态管理库，专为复杂应用设计，用于集中管理所有组件的共享状…...

编程日记 2025/9/19 10:10:29

成为一种国家战略范畴的新基建的智慧园区开源了。

智慧园区场景视频监控平台是一款功能强大且简单易用的实时算法视频监控系统。它的愿景是最底层打通各大芯片厂商相互间的壁垒，省去繁琐重复的适配流程，实现芯片、算法、应用的全流程组合，从而大大减少企业级应用约95%的开发成本。用户只需在界…...

编程日记 2025/9/19 10:10:09

拜特科技助力科达制造，资金管理信息化迈入新阶段

近日，拜特科技成功签约科达制造股份有限公司（以下简称“科达制造”）资金管理系统升级项目。科达制造通过资金管理系统的不断迭代升级和优化，能够更加高效地管理和运用资金，提高企业的资金利用效率，满足企业…...

编程日记 2025/9/18 13:54:31

每日一题（小白）暴力娱乐篇20

这个题用瞪眼法解决，snakeaekns 代码如下👇 public static void main(String[] args) {Scanner scannew Scanner(System.in);System.out.println("aekns");scan.close();} 第二种方式：将snack拆解，按照大小进行排序。…...

编程日记 2025/9/10 12:18:34

Flutter iOS 项目中 VolumeControllerPlugin 报错解决方案

Flutter iOS 项目中 VolumeControllerPlugin 报错解决方案在开发 Flutter 应用时，有时会遇到 iOS 项目构建失败的情况，其中一种较为常见的错误是与 VolumeControllerPlugin 相关的报错，错误信息如下： Could not build the prec…...

编程日记 2025/9/19 1:40:37

Java实战报错 tcp

为什么报错tcp Preview 从图片中的错误信息来看，程序遇到了 java.net.BindException，具体错误信息是 "Address already in use: bind"。这意味着你的程序试图绑定到一个已经被其他进程占用的端口（在本例中是9999端口）。…...

编程日记 2025/9/9 11:23:04

【补题】P10424 [蓝桥杯 2024 省 B] 好数（数位dp）

题意： 一个整数如果按从低位到高位的顺序，奇数位（个位、百位、万位……）上的数字是奇数，偶数位（十位、千位、十万位……）上的数字是偶数，我们就称之为“好数”。给定一个正整数 N…...

编程日记 2025/9/19 10:10:28

控制 ElementUI el-table 树形表格多选框的显示层级

1、你可以通过 selectable 属性来控制哪些行可以选择（显示多选框） <el-table:data"tableData"row-key"id"default-expand-all:tree-props"{children: children, hasChildren: hasChildren}"select"handleSelect&…...

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

今日行情明日机会——20250409

今日行情还需要考虑关税对抗~ 2025年4月8日涨停的主要行业方向分析 1. 军工（19家涨停） 细分领域：国防装备、航空航天、军民融合。催化因素：国家安全战略升级、国防预算增加、重大军工项目落地预期。 2. 免税（15家涨…...

编程日记 2025/9/18 19:30:46

基础知识补充篇：什么是DAPP前端连接中的provider

专栏：区块链入门到放弃查看目录-CSDN博客文章浏览阅读352次。为了方便查看将本专栏的所有内容列出目录，按照顺序查看即可。后续也会在此规划一下后续内容，因此如果遇到不能点击的，代表还没有更新。声明：文中所出观点大多数源于笔者多年开发经验所总结，如果你想要知道区块…...

编程日记 2025/9/19 10:07:47

47常用控件_QWidget的toolTip属性

一个 GUI 程序,界面比较复杂, 按啥的很多~~ 当你把鼠标悬停到这个控件上的时候,就能弹出一个提示~~ setToolTip：设置提示内容 setToolTipDuring：设置提示的时间 toolTip 只是给用户看的.在代码中一般不需要获取到 toolTip. 代码示例: 设置按钮的 toolT…...

编程日记 2025/9/13 1:26:09

解密工业控制柜：认识关键硬件（PLC）

前言作为一名视觉开发工程师，我们不仅要做到做好自己的工作，我们更需要在工业现场学习更多知识，最近网上流传很多，“教会徒弟，饿死师傅”；在自动化行业中，在项目下来很忙的时候，我们…...

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

PDF编辑,小白工具功能丰富多样,在线无需下载,操作便捷,新手小白必备

在当今数字化办公和学习的时代，PDF 文件的使用极为广泛，而小白工具的在线 PDF 浏览器以其强大且丰富的功能，成为了一款不可多得的优质 PDF 阅读工具，PDF编辑,在线无需下载,操作便捷,新手小白必备以下为您详细推荐： 功能…...

编程日记 2025/9/3 6:21:56

网络安全公司推荐：F5荣膺IDC全球Web应用与API防护领导者

API的广泛使用正推动安全实践的重大变革。研究表明，有41%的企业管理的API数量至少与应用数量相等，因此企业亟需实现全面的API防护。近日，IDC发布《IDC MarketScape：2024年全球Web应用和API防护企业平台供应商评估报告》&#xff0…...

编程日记 2025/9/11 19:50:44

WPF轮播图动画交互动画缩放展示图片

WPF轮播图动画交互动画缩放展示图片效果如下图： XAML代码： <Window x:Class"Caroursel.MainWindow"xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x"http://schemas.microsoft.com/winfx/20…...

编程日记 2025/9/9 0:09:04

玩转Docker | 使用Docker安装FileDrop文件共享工具

玩转Docker | 使用Docker安装FileDrop文件共享工具前言一、FileDrop介绍FileDrop简介主要特点二、系统要求环境要求环境检查Docker版本检查检查操作系统版本三、部署FileDrop服务下载镜像创建容器检查容器状态检查服务端口安全设置四、访问FileDrop应用创建名称五、测试与使用…...

编程日记 2025/9/18 22:17:22

实战篇-主时钟约束

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、pandas是什么？二、使用步骤 1.引入库2.读入数据总结前言这是对B站傅里叶的猫视频时钟约束的笔记一、主时钟约束 report_clock_networks …...

编程日记 2025/9/11 10:21:33

Oracle JDBC驱动 ojdbc14：使用指南与版本说明（附资源下载）

ojdbc14 是 Oracle 公司提供的 JDBC（Java 数据库连接）驱动程序，用于连接 Java 应用程序与 Oracle 数据库。 ojdbc14.jar包已下载：https://pan.quark.cn/s/5ee7841dcd9c 关键信息用途：使 Java 应用程序能够连接 Orac…...

编程日记 2025/9/15 5:49:27

spring mvc 异常处理中@RestControllerAdvice 和 @ControllerAdvice 对比详解

RestControllerAdvice 和 ControllerAdvice 对比详解 1. 基本概念注解等效组合核心作用ControllerAdviceComponent RequestMapping（隐式）定义全局控制器增强类，处理跨控制器的异常、数据绑定或全局响应逻辑。RestControllerAdviceControll…...

编程日记 2025/9/12 13:59:11

单元测试原则之——不要过度模拟

什么是过度模拟？过度模拟（over-mocking）是指在单元测试中，模拟了太多依赖项，甚至模拟了本不需要模拟的简单对象或行为。过度模拟会导致：测试代码变得复杂，难以阅读和维护。测试逻辑偏离了实际业务逻辑，无法验证真实代码的行为。忽略了被测单元与依赖项之间的真实交互…...

编程日记 2025/9/14 14:51:03

云轴科技ZStackCTO王为：AI Infra平台具备解决私有化AI全栈难题能力

4月1-2日，2025中国生成式AI大会在北京举办，该会议已成为国内AI领域最具影响力的产业峰会之一。云轴科技ZStack CTO王为受邀在“大模型”峰会上发表主题为《AI 原生实践：企业实际场景的 AI 赋能与 Infra 实践探索》演讲，并参加《De…...

编程日记 2025/9/17 15:17:02

注意数组元素是0的情况 #include<iostream> using namespace std;int t; const int N2e510;int main() {ios::sync_with_stdio(0);cin.tie(0);cout.tie(0);cin>>t;while(t){long long n;cin>>n;long long a[N];for(int i0; i<n; i) cin>>a[i];stri…...

编程日记 2025/9/15 0:32:24

拜特科技受邀参加跨境电商行业分会，共探资金管理数字化与AI应用新路径

3月12日，由广东省首席信息官协会主办的“跨境电商行业分会——走进绿联科技”活动在深圳绿联科技圆满举行。作为专注于金融科技与资金管理数字化解决方案的领先提供商，拜特科技受邀参加此次会议，与行业精英共同探讨跨境电商企业的资金管理数字…...

编程日记 2025/8/26 15:35:06

贪心算法（17）（java）可被三整除的最大整数和

给你一个整数数组 nums，请你找出并返回能被三整除的元素最大和。示例 1： 输入：nums [3,6,5,1,8] 输出：18 解释：选出数字 3, 6, 1 和 8，它们的和是 18（可被 3 整除的最大和）。 …...

编程日记 2025/9/10 4:53:20

架构师面试（二十八）：业务建模

问题今天我们撇开纯技术，聊一下关于【业务建模】的话题。何为业务建模？即通过易于理解的模型将业务中的关键问题准确表达出来。业务建模是需求分析环节乃至整个软件生命周期中非常关键的一环，它几乎决定了软件的开发周期和成本。下面关…...

编程日记 2025/9/19 2:55:09

求教：vue中的find()函数的用法this.$set

需求：为了实现联动，当我在选择问题标题之后，后面几列的内容就会自动联动显示方案一： 选完之后直接是this.questionList[index] this.selected; 这样的效果虽然改动了数组，但是页面上没有显示出来实际数组的内容 …...

编程日记 2025/9/19 5:35:13

常见算法模板总结

文章目录一、二叉树1. DFS2. BFS 二、回溯模板三、记忆化搜索四、动态规划1. 01背包朴素版本滚动数组优化 2. 完全背包朴素版本滚动数组优化 3. 最长递增子序列LIS朴素版本贪心二分优化 4. 最长公共子序列5. 最长回文子串五、滑动窗口六、二分查找七、单调栈八、单调队列九、…...

编程日记 2025/9/8 1:30:44

生产者消费者模型

目录一、生产者消费者模型 1. 生产者消费者模型是什么？ 2. 为什么使用生产者消费者模型？ 3. 生产者消费者模型的特点（321原则） 🌵3种关系 🌵2种角色 🌵1个交易场所二、基于BlockingQue…...

编程日记 2025/9/10 18:08:06

linux里怎么禁用其他用户使用sudo添加定时器，例如创建的tomcat用户禁止使用 sudo crontab -u tomcat -e 添加定时器

要禁止 tomcat 用户通过 sudo crontab -u tomcat -e 添加定时任务，需从 sudo 权限控制和 crontab 访问限制两方面入手。以下是具体步骤： 一、核心思路禁止 tomcat 用户使用 sudo 提权执行 crontab 修改 /etc/sudoers 配置，移除 tomcat 用户…...

编程日记 2025/9/7 20:05:21

函数作为返回值输出

实际上，函数当做返回值输出的应用场景也很多，也更能体现函数式变成的巧妙，让函数继续返回一个可执行的函数，意味着运算过程是可延续的。判断数据的类型常见的判断一个数据的类型的函数： 单例模式下面是一个单例模…...

编程日记 2025/9/14 18:10:36

黑马 SpringAI+DeepSeek 实战：从对话机器人到企业级知识库的大模型开发全攻略

附完整代码项目案例，3 天吃透大模型应用开发核心技术需要完整项目学习视频以及源码的私信博主，谢谢~大家一起加油呐！！ 01.认识AI和大模型小结 AI的发展过程符号主义机器学习深度学习——自然语言处理（NLP…...

编程日记 2025/9/18 21:01:29

word表格间隔设置

1.怎么解决word表格间隔达不到我们想要的要求其实很简单, 我们直接在word表格里面, 全选表格中里面的内容。接着,我们选择自动调整---->根据内容自动调整表格,即可达到我们想要的要求...

编程日记 2025/8/17 9:32:27

Windows批处理脚本，bat 循环数组进入文件夹进行后续操作

文章目录前言一、脚本功能解析1.2、定义数组1.2、遍历数组1.2、处理每个数组元素1.2、循环控制1.2、结束脚本二、之前编写的脚本三、优化后的脚本代码四、总结五、感谢前言 Windows批处理脚本，主要功能是遍历一个预定义的数组，并对每个数组元素执行cd…...

编程日记 2025/9/10 15:49:40

TurtleBot3 Package turtlebot3_drive source code read

前言此处阅读简单的 turtlebot3_drive 代码。从ROS的角度，作为一个demo，它足够小、简单，可以从中看见ROS的 NodeHandle如何使用。此外，我们也能简单地看到 “自动避障功能的实现”。从C的角度，它实际上并不复杂&…...

编程日记 2025/9/19 2:22:18

机器学习的下一个前沿是因果关系吗？

如今，越来越多研究人员意识到，将因果关系融入机器学习，或许会是该领域实现重大突破的关键所在。机器学习凭借先进的预测能力，已为诸多行业带来了显著变革，但也暴露出了一定的局限性。而因果关系，作为理解…...

编程日记 2025/9/10 7:05:23

Mujoco xml模型

Mujoco xml模型一个例子compileroptionassetmesh default基本使用childclass与class多个class worldbodybody关系inertialjointgeom XML主要分为以下三个部分： < asset> ： 用 tag导入STL文件；< worldbody>：用tag定义…...

编程日记 2025/9/17 15:25:58

MyBatis 详解及代码示例

MyBatis 是一个半自动 ORM 框架，主要用于 Java 与数据库之间的持久化操作，它本质是对 JDBC 的封装全名：MyBatis（前身 iBATIS）核心作用：自动将 SQL 执行结果映射为 Java 对象；也可以将 Java 对…...

编程日记 2025/9/10 11:01:38

STL-list链表

STL-list链表实现 STL中采用双向带头循环链表来实现 list，下面将使用 C++ 实现 STL list 链表。 list 类中包含两个主要部分，一个是指向哨兵位头节点的指针（_head），另一个是结构体类型的迭代器（__list_iterator）。哨兵位头节点本身是不存储数据的，它只是用于简化代码…...

编程日记 2025/9/14 10:18:03

R语言中的rvest库写个视频爬虫通用代码

朋友让我用R语言的rvest库写一个通用的视频爬虫代码示例。首先，我需要回忆一下rvest库的主要功能，它主要是用来做网页抓取和解析的，类似于Python的BeautifulSoup。但是视频爬虫的话，可能需要处理动态加载的内容，或者找…...

编程日记 2025/9/17 8:52:33

SQLite 中日期型数据定义及处理（Delphi 版本）

在使用SQLite的时候，肯定需要使用到日期型数据类型，但是SQLite没有直接支持日期类型，比如在其他数据库中支持的DateTime类型，在Delphi中是TDateTime类型。那么实际处理中应该如何处理呢？ 可以使用两种方式类在SQLit…...

编程日记 2025/9/18 9:12:40

4.9复习记

1.地宫取宝--记忆化搜索，可以先写void dfs，然后在改成ll 形式的，边界条件return 0/1； 记忆化数组与dfs元素保持一致，记得记忆化剪枝这个题特殊在value可能是0，不取的时候应该记为-1 https://mpbeta.cs…...

编程日记 2025/9/18 20:22:35

Flink基础

Flink基础目录 Flink简介核心概念编程模型核心功能应用场景部署模式生态系统最佳实践学习资源实践案例高级特性 1. Flink简介 1.1 什么是Flink Apache Flink是一个开源的分布式流处理和批处理系统。它能够处理有界（批处理）和无界（流处理…...

编程日记 2025/9/10 7:20:19

SASE、零信任安全理念的发展脉络

SASE（安全访问服务边缘）与零信任架构的发展脉络，是云安全理念从 “边界防御” 向 “动态信任” 跃迁的典型缩影。两者的演进既独立又交织，共同推动网络安全从静态合规走向主动治理。以下从技术起源、理念突破、产业实践到未来趋势展开深度解析：一、零信任：从理论构想到…...

编程日记 2025/9/15 12:03:04

CompletableFuture 和 List＜CompletableFuture＞ allOf() join() get() 使用经验

CompletableFuture<Map<Menu, Map<IntentDetail, Double>>> xxx CompletableFuture.supplyAsync(() -> {Map<Menu, Map<IntentDetail, Double>> scores new ConcurrentHashMap<>();// 存储结果scores.computeIfAbsent(menu, k -> n…...

编程日记 2025/9/15 0:28:36

Vue.js组件化开发实战：从工程化到安全纵深设计

文章目录开篇：现代前端组件化演进之路组件设计核心：高内聚低耦合实践工程化基石：从Webpack到Monorepo 安全纵深设计：RASP在组件层的实现实战：动态表单组件的三次进化进阶篇：组件工厂模式与策略模…...

编程日记 2025/9/14 12:34:27

【深度解析】SkyWalking 10.2.0版本安全优化与性能提升实战指南

前言 Apache SkyWalking 作为云原生可观测性领域的佼佼者，在微服务架构监控中扮演着至关重要的角色。然而，官方版本在安全性、镜像体积和功能扩展方面仍有优化空间。本文将分享一套完整的 SkyWalking 10.2.0 版本优化方案，从安全漏洞修复到镜…...

编程日记 2025/9/17 23:57:32

NOIP2011提高组.玛雅游戏

目录题目算法标签: 模拟, 搜索, d f s dfs dfs, 剪枝优化思路*详细注释版代码精简注释版代码题目 185. 玛雅游戏算法标签: 模拟, 搜索, d f s dfs dfs, 剪枝优化思路可行性剪枝如果某个颜色的格子数量少于 3 3 3一定无解因为要求字典序最小, 因此当一个格子左边有…...

编程日记 2025/9/18 22:05:03

常微分方程求解全解析：从基础到矩阵方法深度实践

常微分方程求解全解析：从基础到矩阵方法深度实践一、常微分方程基础与解法体系 1．微分方程基本概念解析常微分方程的阶数指方程中未知函数导数的最高阶数。通解是包含任意常数且常数个数与方程阶数相同的解，特解则是通解中任意常数取特定值得到的解。以自由落体运动为例…...

编程日记 2025/9/15 19:27:15

Go 微服务框架 | 中间件

文章目录定义中间件前置中间件后置中间件路由级别中间件定义中间件中间件的作用是给应用添加一些额外的功能，但是不会影响原有应用的编码方式，想用的时候直接添加，不想用的时候也可以轻松去除，实现所谓的可插拔。中间件的实现…...

编程日记 2025/9/18 19:55:27

【HarmonyOS Next之旅】DevEco Studio使用指南(十二)

目录 1 -> Code Linter代码检查 2 -> 配置代码检查规则 3 -> 查看/处理代码检查结果 1 -> Code Linter代码检查 Code Linter针对ArkTS/TS代码进行最佳实践/编程规范方面的检查。可根据扫描结果中告警提示手工修复代码缺陷，或者执行一键式自动修复…...

编程日记 2025/9/13 23:01:27

目录