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

yarn list --pattern vuex-module-decorators

news 来源：原创 2025/5/15 7:48:50

dgq@dgqdeMac-mini spid-admin % yarn list --pattern vuex-module-decorators
yarn list v1.22.22
└─ vuex-module-decorators@0.16.1
✨  Done in 0.24s.

好的，这段代码是一个典型的 Vuex 模块定义，使用了 vuex-module-decorators 库。这个库为 Vuex 提供了基于装饰器的 API，使得模块的定义更加简洁和面向对象。

我来详细解释一下这段代码的各个部分：

1. 导入模块和 API：

spid-admin/src/store/modules/user.ts

import { VuexModule, Module, Action, Mutation, getModule } from 'vuex-module-decorators'
import { login, logout, getUserInfo, phoneLogin } from '@/api/users'
import { getToken, setToken, removeToken } from '@/utils/cookies'
import router, { resetRouter } from '@/router'
import { PermissionModule } from './permission'
import { TagsViewModule } from './tags-view'
import store from '@/store'

vuex-module-decorators：这个库提供了 @Module, @Action, @Mutation, getModule 等装饰器，用于简化 Vuex 模块的定义。
login, logout, getUserInfo, phoneLogin：这些是从 @/api/users 导入的 API 函数，用于与后端进行用户相关的交互（登录、登出、获取用户信息等）。
getToken, setToken, removeToken：这些函数来自 @/utils/cookies，用于操作浏览器 Cookie，存储和读取 token 信息。
router, resetRouter：来自 @/router 的路由实例和重置路由的函数。
PermissionModule, TagsViewModule：来自 permission 和 tags-view 的 Vuex 模块。
store：从 @/store 导入的 Vuex 的 store 实例。

2. 定义接口 IUserState

export interface IUserState {token: stringid: numberusername: stringavatar: stringremark: stringroles: string[]phone: stringstatus: numberpid: numberpasswordAttemptCount: number
}

IUserState 定义了用户状态的数据结构，包括 token, id, username, avatar 等属性，确保数据类型的正确性。

3. 定义 Vuex 模块 User

@Module({ dynamic: true, store, name: 'user' })
class User extends VuexModule implements IUserState {// ...
}

@Module({ dynamic: true, store, name: 'user' })：
- @Module 是一个装饰器，用于将类标记为一个 Vuex 模块。
- dynamic: true 表示该模块是动态注册的，而不是在 store 初始化时静态注册。
- store 接收 Vuex store 的实例。
- name: 'user' 指定该模块在 store 中的名称。
class User extends VuexModule implements IUserState：
- User 类继承自 VuexModule，使其具有 Vuex 模块的功能。
- implements IUserState 表示该类必须实现 IUserState 接口中定义的所有属性。

4. 定义模块状态 (state)

  public token = getToken() || ''public id = -100public username = ''public avatar = ''public remark = ''public roles: string[] = []public phone = ''public status = -100public pid = -100public passwordAttemptCount = -100public introduction = ''

这些是模块的初始状态。public 表示这些属性可以被外部访问。
token 的初始值从 Cookie 中读取。
其他状态都有默认值，表示在未登录状态。

5. 定义 Mutations

  @Mutationprivate SET_TOKEN(token: string) {this.token = token}// ... 其他 mutation

@Mutation 是一个装饰器，用于声明修改状态的方法。
Mutation 方法接收一个 payload（数据），并使用 this 关键字修改模块的状态。
private 修饰符表明这些方法只能在模块内部被调用。

6. 定义 Actions

 @Action({ rawError: true })public async Login(userInfo: { username: string, password: string}) {// ...}@Action({ rawError: true })public async GetUserInfo() {// ...}// ... 其他 action

@Action 是一个装饰器，用于声明执行异步操作的方法。
Action 方法接收一个 payload（数据），并使用 this 关键字访问模块的状态和调用 mutations。
{ rawError: true } 表示该 action 抛出的错误将直接抛出，而不是包装在 Promise 中。
Action 中调用 API，并通过 mutation 方法更新状态。

7. getModule 和导出 UserModule

export const UserModule = getModule(User)

getModule(User) 是 vuex-module-decorators 提供的函数，用于获取 User 模块的实例。
export const UserModule 将 User 模块实例导出，以便在其他模块中使用。

总结：

这段代码使用 vuex-module-decorators 简化了 Vuex 用户模块的定义，包括：

状态 (state): 存储用户信息，如 token、id、用户名等。
Mutations: 用于同步更新状态的方法（例如设置 token、设置用户信息等）。
Actions: 用于异步操作和提交 mutations 的方法（例如登录、登出、获取用户信息等）。

如何使用：

在组件中，你可以通过 UserModule 访问用户模块的状态和调用 action：

    import { UserModule } from '@/store/modules/user';// ...mounted() {console.log(UserModule.username); // 获取用户名}methods: {async handleLogin() {await UserModule.Login({username:'admin', password:'password'}) // 调用登录 action}}

这段代码展示了一种标准的 Vuex 模块化的实现方式，对于大型应用来说，使用模块化管理状态是至关重要的。 它更加组织化、易于维护，并通过装饰器方式提高了代码的可读性。

vuex-module-decorators

yarn list --pattern vuex-module-decorators

dgqdgqdeMac-mini spid-admin % yarn list --pattern vuex-module-decorators yarn list v1.22.22 └─ vuex-module-decorators0.16.1 ✨ Done in 0.24s.好的，这段代码是一个典型的 Vuex 模块定义，使用了 vuex-module-decorators 库。这个库为 Vuex 提…...

编程日记 2025/5/15 7:48:50

day19-Linux软件包

科普，什么是代码文件。电脑程序Program，就是某一个编程语言编写的一个代码文件，里面包含了该语言特有的指令，以及各种字符、符号。 linux自带的network管理脚本，shell脚本什么是软件程序。软件程序，就…...

编程日记 2025/5/6 3:46:20

【网络分析工具】WireShark的使用（超详细）

网络分析工具——WireShark的使用简介WireShark软件安装Wireshark 开始抓包示例WireShark抓包界面WireShark 主要分为这几个界面TCP包的具体内容Wireshark过滤器设置wireshark过滤器表达式的规则Wireshark抓包分析TCP三次握手Wireshark分析常用操作简介 WireShark是非常流…...

编程日记 2025/5/15 7:44:21

React 高级组件开发：动态逻辑与性能优化

React 高级组件开发：动态逻辑与性能优化引言一、动态逻辑与配置化组件1. 动态组件的设计二、自定义 Hooks 解决复杂状态管理1. 自定义 Hook 的优势三、高阶组件（HOC）模式1. 高阶组件的应用场景四、性能优化1. 使用 React.memo 优化渲染2.…...

编程日记 2025/5/15 7:15:17

Vue 3 与 Tauri 集成开发跨端APP

1、安装RUST 下载地址：Install Rust - Rust Programming Language 安装： 安装完成后，在命令行里运行: rustup 2、安装 Node.js 与 npm 或 pnpm ，如果已经安装，可以忽略 # 使用 nvm 安装 Node.js 最新版本 nvm install…...

编程日记 2025/5/15 7:43:17

FreeRTOS中xPortPendSVHandler()和vPortSVCHandler()这两个函数的作用

在 FreeRTOS 中，xPortPendSVHandler() 和 vPortSVCHandler() 是两个重要的中断服务例程（ISR），它们负责处理与操作系统相关的异常。这些函数对于实现上下文切换和任务管理至关重要。下面分别解释这两个函数的作用： xPo…...

编程日记 2025/5/15 7:26:05

【RK3588 Linux 5.x 内核编程】-内核IO复用与poll

内核IO复用与poll 文章目录内核IO复用与poll1、IO复用2、Poll的使用2.1 用户空间程序中使用Poll2.2 在内核空间实现Poll3、驱动程序实现4、用户空间程序实现5、验证让我们假设应用程序想要根据其状态读取/写入许多 IO（输入和输出）的情况。在这种情况下我们该怎么办？我们必…...

编程日记 2025/5/15 1:16:15

精选9个自动化任务的Python脚本精选

大家好，我是老邓，今天我们来一起学习如何用Python进行一些常见的自动化操作，涉及文件处理、网络交互等实用技巧。即使你没有任何Python基础也没关系，我会用最通俗易懂的语言来讲解。 1. 对目录中的文件进行排序 import osdef so…...

编程日记 2025/5/15 7:46:42

使用JFLASH批量烧录程序导入生产的简易设置

基于上一篇帖子我们可以把任意厂家的MCU导入jflash来使用首先，我使用的是V699C版本，目前使用了一段时间没有问题我尝试过换不同的电路板烧录连续烧录，当单片机里没有程序的时候，问题不大，但是一旦单片机里有程序的话…...

编程日记 2025/5/10 18:46:56

计算机体系结构期末复习1：分支预测

目录一、为什么需要分支预测 1.存在分支的指令 2.控制相关的处理方式一：stall(阻塞）流水线二、分支预测方法 1.预测正确与预测错误的性能损失 2.减少预测错误的惩罚 3.提高分支预测的准确度 1）编译时（静态方法&#xff…...

编程日记 2025/5/15 7:15:17

获取页面上所有的img，并保存到本地

浏览器的 JavaScript 环境中受限于安全和隐私原因，不允许直接指定下载文件夹或访问本地文件系统。因此，无法通过纯 JavaScript 在浏览器控制台中实现下载图片到指定文件夹的功能。然而，您可以使用 Web API 提供的文件系统访问 API 进行一定…...

编程日记 2025/5/15 7:12:08

Day56 图论part06

108.冗余连接并查集应用类题目，关键是如何把题意转化成并查集问题代码随想录 import java.util.Scanner;public class Main{public static void main (String[] args) {Scanner scanner = new Scanner(System.in);int n = scanner.nextInt();DisJoint disjoint = new DisJo…...

编程日记 2025/5/11 6:02:35

深度学习助力股市预测：LSTM、RNN和CNN模型实战解析

作者：老余捞鱼原创不易，转载请标明出处及原作者。写在前面的话：众所周知，传统的股票预测模型有着各种各样的局限性。但在我的最新研究中，探索了一些方法来高效预测股市走势，即CNN、RNN和LSTM这些深度学习…...

编程日记 2025/5/10 11:28:14

.NET能做什么？全面解析.NET的应用领域

.NET 是由微软开发的一个开源、跨平台的开发框架。它不仅支持构建各种应用程序，还能运行在不同的操作系统上，包括 Windows、Linux 和 macOS。自从 .NET Core 的推出，.NET 成为了一个现代化的开发平台，能够满足企业和开发者日益多样…...

编程日记 2025/5/6 7:23:01

分布式事务入门一

分布式事务入门一您好，我是今夜写代码,今天学习下分布式事务相关理论，以及常见的解决方案，为后续掌握Seata分布式事务框奠定基础。为什么需要分布式事务? 分布式事务主要由于存储资源的分布性，通常涉及多个数据库。分布式…...

编程日记 2025/5/14 20:39:50

华为，新华三，思科网络设备指令

1. 设备信息查看华为 display version # 查看设备版本信息 display device # 查看设备硬件信息新华三（H3C） display version # 查看设备版本信息 display device # 查看设备硬件信息锐捷 show version …...

编程日记 2025/5/8 1:44:56

深入理解HTML页面加载解析和渲染过程（一）

一篇老文章，存在草稿有点可惜 HTML页面呈现通常包括三个主要过程：加载、解析和渲染。让我们详细探讨每个过程。 1. 加载过程加载过程主要涉及获取页面所需的所有资源。这个过程包括以下步骤： 1.1 URL资源加载缓存读取：浏览器…...

编程日记 2025/5/6 20:28:37

Odoo 免费开源 ERP：通过 JavaScript 创建对话框窗口的技术实践分享

作者 | 老杨出品 | 上海开源智造软件有限公司（OSCG） 概述在本文中，我们将深入研讨如何于 Odoo 18 中构建 JavaScript（JS）对话框或弹出窗口。对话框乃是展现重要讯息、确认用户操作以及警示用户留意警告或错误的行…...

编程日记 2025/5/13 17:29:23

Word批量更改题注

文章目录批量更改批量去除空格在写文章的时候，往往对图片题注有着统一的编码要求，例如以【图 1- xx】。一般会点击【引用】->【插入题注】来插入题注，并且在引用的时候，点击【引用】->【交叉引用】，并且在交叉…...

编程日记 2025/5/12 15:59:54

电脑缺失libcurl.dll怎么解决？详解电脑libcurl.dll文件丢失问题

一、libcurl.dll文件丢失的原因 libcurl.dll是一个用于处理URL传输的库文件，广泛应用于各种基于网络的应用程序。当这个文件丢失时，可能会导致相关应用程序无法正常运行。以下是libcurl.dll文件丢失的一些常见原因： 软件安装或卸载不完整&a…...

编程日记 2025/5/10 8:48:00

OpenCV相机标定与3D重建(36)计算两幅图像之间基本矩阵（Fundamental Matrix）的函数findFundamentalMat()的使用

操作系统：ubuntu22.04 OpenCV版本：OpenCV4.9 IDE:Visual Studio Code 编程语言：C11 算法描述从两幅图像中的对应点计算基本矩阵。 cv::findFundamentalMat 是 OpenCV 中用于计算两幅图像之间基本矩阵（Fundamental Matrix&#…...

编程日记 2025/5/12 23:07:29

JQ中的each()方法与$.each()函数的使用区别

介绍 jquery里的 each() 是一个强大的遍历工具，用于迭代集合中的元素，并为每个元素执行指定的函数‌。它既可以用于遍历 jQuery对象集合，也可以用于遍历普通的数组或对象。 each()对象遍历语法： $(selector).each(function(in…...

编程日记 2025/5/12 2:48:38

浅谈下雪花算法的原理，及在项目中使用需要注意哪些事项

目录背景雪花算法原理算法特点注意事项总结背景雪花算法是一种分布式ID生成算法，由Twitter提出，用于在分布式系统中生成全局唯一的ID。该算法通过将64位的长整型数字分为符号位、时间戳、工作机器ID和序列号四个部分，确保了ID的…...

编程日记 2025/5/12 21:59:54

洛谷P1536 村村通（c嘎嘎）

题目链接：P1536 村村通 - 洛谷 | 计算机科学教育新生态题目难度：普及/提高解题思路：本题很明显考察是并查集，并查集之前我的博客介绍过可以看看这篇洛谷P1551 亲戚（c嘎嘎）-CSDN博客，本题是…...

编程日记 2025/5/14 0:56:43

双指针——查找总价格为目标值的两个商品

一.题目描述 LCR 179. 查找总价格为目标值的两个商品 - 力扣（LeetCode） 二.题目解析这个题目非常简单，其实就是判断有没有两个数加起来等于target。三.算法解析 1.暴力解法暴力解法的话我们可以枚举出所有的情况，然后判…...

编程日记 2025/5/11 14:59:44

智慧园区小程序开发制作功能介绍

智慧园区小程序开发制作功能介绍智慧园区小程序系统作为一款面向园区企业的一站式线上服务平台，可为企业提供数智化的园区办公服务。智慧园区小程序功能介绍 1、园区公告、政策信息查看足不出户掌握最新动态，“园区公告、政策信息”等信息。首页点击对应…...

编程日记 2025/5/9 9:41:45

【面经】25届双非本科字节跳动北京四年的总结

点击“硬核王同学”，选择“关注” 福利干货第一时间送达大家好，我是硬核王同学，最近在做免费的嵌入式知识分享，帮助对嵌入式感兴趣的同学学习嵌入式、做项目、找工作！ 给大家分享一个25届本科大佬的面经&#xff0c…...

编程日记 2025/5/11 21:02:53

MySql幻读问题

认识具有反复性。之前以为理解了幻读，最近看黑马的mysql教程以为再次加深了认识。然而现在认为之前的理解都是错误的，而且网上很多关于幻读的解释，都不太准确。关于幻读的最佳解释还是要看官网mysql官网幻读解释脏读和不可重复读比较好理…...

编程日记 2025/5/11 15:52:41

欧拉计划启航篇（一）

目录 1.什么是欧拉计划 2.简单介绍 3.访问不上去怎么办 4.第一题的代码编写 5.代码的优化 1.什么是欧拉计划欧拉计划是和我们的数学知识相关的一个网站，但是这个网站上面的相关的问题需要我们去使用编程的知识去进行解决，因此这个适合对于想要提升…...

编程日记 2025/5/14 21:46:46

Pandas系列|第二期：Pandas中的数据结构

1.Pandas中的数据结构：Series和DataFrame Pandas 的主要数据结构是 Series （一维数据）与 DataFrame（二维数据），这两种数据结构足以处理金融、统计、社会科学、工程等领域里的大多数典型用例。 Series 是一…...

编程日记 2025/5/14 15:04:56

GitLab 服务变更提醒：中国大陆、澳门和香港用户停止提供服务（GitLab 服务停止）

目录前言一. 变更详情 1. 停止服务区域 2. 邮件通知 3. 新的服务提供商 4. 关键日期 5. 行动建议二. 迁移指南三. 注意事项四. 相关推荐前言近期，许多位于中国大陆、澳门和香港的 GitLab 用户收到了一封来自 GitLab 官方的重要通知。根据这封邮件…...

编程日记 2025/5/13 10:35:46

基于openEuler22.09部署OpenStack Yoga云平台（一）

OpenStack Yoga部署安装OpenStack 一、基础准备基于OpenStack经典的三节点环境进行部署，三个节点分别是控制节点（controller）、计算节点（compute）、存储节点（storage），其中存储…...

编程日记 2025/5/12 17:14:16

信息安全管理：通用安全管理checklist

通用安全管理checklist是对信息安全管理调查问卷的一个补充，将以前没有包含的检查点纳入进来，算是对这个系列的一个拾遗与结尾。内容包含安全策略与计划、组织和人员安全、安全工程管理、安全产品管理与符合性五部分。一、安全策略与安全计划 ▼▼安全…...

编程日记 2025/5/13 10:06:27

硬件设计-硬件 EMC 设计规范

目录引言： 常见原因总体概念及考虑布局屏蔽滤波引言： 本规范只简绍 EMC 的主要原则与结论，为硬件工程师们在开发设计中抛砖引玉。电磁干扰的三要素是干扰源、干扰传输途径、干扰接收器。EMC 就围绕这些问题进行研究。最基本的…...

编程日记 2025/5/10 4:55:31

【C++】数据结构单链表的实现（企业存储用户数据的实现）

本篇博客给大家带来的是用C语言来实现数据结构的单链表（企业存储用户数据的实现） 🐟🐟文章专栏：C 🚀🚀若有问题评论区下讨论，我会及时回答 ❤❤欢迎大家点赞、收藏、分享你们的支持…...

编程日记 2025/5/13 21:04:39

【Vue3+ts入门小试牛刀】

Vue 3是一个流行的JavaScript框架，它提供了创建交互式用户界面的工具。Vite是一个现代化的构建工具，用于快速构建Vue应用。TypeScript是一种类型安全的JavaScript的超集，它可以帮助我们在开发过程中减少错误。下面是一个使用Vue 3、Vite和T…...

编程日记 2025/5/6 19:10:26

AI发展新态势:从技术突破到安全隐忧

AI安全的新挑战近期AI领域出现了令人担忧的新发现。根据最新研究，AI模型已经开始展现出策略性欺骗的倾向。具体表现在以下几个方面：策略性欺骗行为的出现在实验中发现，当研究人员试图让AI执行一些"反Anthropic"的操作时(如获取模型权限和外部服务器访问)，模…...

编程日记 2025/5/12 17:33:07

肝功能不正常可以过教师入职体检吗?

如何看肝功能报告单转氨酶正常等于肝功能正常吗?要想看懂肝功能报告单就要看懂各指标含义。 1、总胆红素TbiL正常值是 1.7-17.1μmol/L 急性黄疸型肝炎活动性肝炎肝坏死、肝癌、胰头癌都异常偏高。 2、直接胆红素 DbiL正常值是 0-6.84μmol/L 结石病、肝癌、胰头癌与这项…...

编程日记 2025/5/2 19:26:42

二百八十二、ClickHouse——删除Linux中的ClickHouse

一、目的由于ClickHosue的库表发生变化，需要删除原有的表结构数据，才能直接把脚本里文件重新安装二、删除步骤 1、关闭ClickHouse服务 systemctl stop clickhouse-server 2、卸载ClickHouse软件包 sudo yum remove clickhouse-server clickhouse…...

编程日记 2025/5/12 23:56:40

Disruptor 高性能环形消息框架

官方文档：Disruptor 1. 简介 Disruptor是一个高性能的互进程（Inter-process）和多线程（Multi-threaded）消息处理库，由LMAX交易所开发，用于在Java虚拟机（JVM）上实现高性能…...

编程日记 2025/5/7 20:08:04

青少年编程与数学 02-005 移动Web编程基础 05课题、rem布局与媒体查询

青少年编程与数学 02-005 移动Web编程基础 05课题、rem布局与媒体查询一、rem单位1. 定义和计算2. 应用场景3. 优点4. 缺点5. 实现响应式布局的方案二、媒体查询基本语法常用媒体类型常用表达式示例三、less基本语法主要特性编译和使用总结四、less嵌套1. 使用媒体查询2. 嵌…...

编程日记 2025/5/14 3:00:58

SuperMap iClient3D for Cesium等高线标注

kele 前言在三维地形分析中，等高线分析是一种非常重要的分析方法，它能直观的表达出地形的高低起伏特征，在三维系统中受到广泛应用。在SuperMap iClient3D for Cesium中，等高线分析是前端GPU分析，能够分析并渲染出等高…...

编程日记 2025/5/12 9:33:16

HTTP状态码

1xx 信息响应类表示接收到请求并继续处理。 100 Continue - 客户端应继续发送请求。101 Switching Protocols - 客户端请求服务器切换协议版本。 2xx 成功响应类表示操作成功被接收、理解并处理。 200 OK - 请求成功，服务器已将所请求的资源返回给客户端。201…...

编程日记 2025/5/13 7:44:38

纯div+css+js弹出窗

目的：实现弹出窗、仅关闭弹窗之后才能操作。自适应宽度与高度、当文本内容太多时、添加滚动条效果。效果图源码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport"…...

编程日记 2025/5/5 15:19:58

python如何使用RSA加密，避免明文密码

如果在python脚本中出现明文密码，就不符合安全的需求，而md5加密又不够安全，推荐RSA加密，原理不多说，直接说怎么弄首先执行这个函数，生成公钥和私钥并写入文件 #pip3 install pycryptodome from Crypto i…...

编程日记 2025/5/14 14:07:22

easegen将教材批量生成可控ppt课件方案设计

之前客户提出过一个需求，就是希望可以将一本教材，快速的转换为教学ppt，虽然通过人工程序脚本的方式，已经实现了该功能，但是因为没有做到通用，每次都需要修改脚本，无法让客户自行完成所有流程&am…...

编程日记 2025/5/12 0:44:22

通过远程控制软件实现企业高效协作

在这个信息技术迅猛发展的时代，远程办公已经成为一种趋势，而远程控制软件则是连接分散团队的重要工具。技术的革新不仅推动了远程控制软件的广泛应用，也为现代办公带来了高效的协作体验。本文将探讨远程控制软件的发展，并以RayLin…...

编程日记 2025/5/12 10:26:16

交换机与路由器的区别

交换机和路由器是网络中的两种关键设备，它们各自承担不同的功能，主要区别体现在以下几个方面： 一、工作层次与功能交换机： 工作层次：交换机主要工作在OSI模型的第二层，即数据链路层。功能：交…...

编程日记 2025/5/14 4:21:37

每天40分玩转Django：Django国际化

Django国际化一、今日学习内容概述学习模块重要程度主要内容国际化基础⭐⭐⭐⭐⭐基本概念、配置设置字符串翻译⭐⭐⭐⭐⭐翻译标记、消息文件模板国际化⭐⭐⭐⭐模板标签、过滤器动态内容翻译⭐⭐⭐⭐模型字段、表单翻译二、国际化基础配置 # settings.py# 启用国际化 …...

编程日记 2025/5/10 20:44:13

游戏开发-UE4高清虚幻引擎教程

简介 Unreal Engine 4 相关教程，涵盖美术流程、独立游戏制作编程、虚拟现实实战、高级材质系统、蓝图可视化编程及进阶、RPG 游戏与特效开发、VR 交互虚拟漫游等方面。包含大量视频教程、工程文件及源码，如 UE4 零基础美术教程中有火焰材质等案例及模型…...

编程日记 2025/5/12 22:52:39

相关文章：