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

Vuex源码-各原理简单总结

1,简单总结

Vuex就是一个构造函数,他拥有install方法Store类这两个属性。在vue初始化调用new Vue的时候,将store作为参数传入,然后调用Vue.use()实际是调用install方法将store这个实例挂载到全局,从而可以保证全局只有一个唯一的store对象。

Store这个类拥有commit和dispatch这些方法,同时将用户传入的state包装成data,从而在vew Vue()的过程中实现了响应式

2,install方法

install方法是借助vue的beforeCreate钩子函数执行,因为此时$options还没有初始化好,他的核心逻辑就是将$options.store赋值到全局$store,且最终将插件添加到installedPlugins中,保证相同的插件不会被重复注册。

3,state实现

vuex中的state值就是Store的一个属性,可以直接从$store对象中获取。同时由于在vue初始化时,data中的数据是响应式的,因此实现的过程将options.state赋值给了data,实现了响应式

4,getter实现

用户传入的getter存储到getters数组中,也是利用Object.defineProperty的get接口,同时借助了computed计算属性实现实时监听。

5,mutation实现

与getter的实现类似,也是将用户传入的mutation存入mutations数组,触发mutation要调用的commit方法实际是访问数组中的某个mutation而触发的调用(eg:this.mutations[method](arg))

6,action实现

action的实现与mutation几乎雷同,只是action的dispatch触发,是定义的异步箭头函数(this.actions[type](payload))。

详细总结参考手写Vuex核心原理

相关文章:

Vuex源码-各原理简单总结

1,简单总结 Vuex就是一个构造函数,他拥有install方法和Store类这两个属性。在vue初始化调用new Vue的时候,将store作为参数传入,然后调用Vue.use()实际是调用install方法将store这个实例挂载到全局,从而可以保证全局只…...

vcpkg 使用 cmake 编译C/C++工程代码时指定使用静态库链接编译

参考文献: CMake 项目中的 vcpkg | Microsoft Learn c - Using static Boost libraries with vcpkg and CMake - Stack Overflow Vcpkg updates: Static linking is now available - C Team Blog (microsoft.com) microsoft/vcpkg: C Library Manager for Windo…...

FlinkCDC系列:数据同步对部分字段的处理,只更新部分字段

在flinkCDC源数据配置中,只对表中的部分字段关注,通过监控部分字段进行数据更新或者不更新,对数据进行同步。主要通过以下两个参数: column.exclude.list 默认: 空字符串 一个可选的、以逗号分隔的正则表达式列表,与…...

Linux 包操作 (rpm)

目录 1. rpm 包1.1. 提取和安装 rpm 包1.2. 查看一个 rpm 包中的文件安装到那里去 1. rpm 包 rpm --version1.1. 提取和安装 rpm 包 使用以下命令来解压 rpm 包: rpm2cpio package.rpm | cpio -idmv其中, package.rpm 是你要解压的 rpm 包的文件名。这个命令将会将 rpm 包解…...

Docker中OceanBase挂载过后,删除再启动无限重启的解决办法

ob-compose.yml文件如下: version: 3 services:oceanbase1:image: oceanbase/oceanbase-ce:latestcontainer_name: oceanbase1hostname: oceanbase1ports:- 2881:2881restart: alwaysprivileged: truevolumes:#- //d/obdata/ob:/root/ob#- //d/obdata/obd:/root/.o…...

react中的forwardRef 和memo的区别?

文章目录 前言介绍forwardRefmemo适用场景优点缺点后言 前言 hello world欢迎来到前端的新世界 😜当前文章系列专栏:前端面试 🐱‍👓博主在前端领域还有很多知识和技术需要掌握,正在不断努力填补技术短板。(如果出现错…...

偶数矩阵判断【C语言作业】

题目 若一个布尔矩阵所有行和所有列的和都是偶数&#xff0c;则称为偶数矩阵。请编写一个程序&#xff0c;判断一个布尔矩阵是否是偶数矩阵。 要求&#xff1a; &#xff08;1&#xff09;输入:首先输入一个正整数n(n<100),代表该矩阵的大小&#xff0c;接下来是n行n列的矩…...

stable-diffusion 电商领域prompt测评集合

和GhostReivew一个思路&#xff0c;还是从比较好的图片或者是civitai上找一些热门的prompt&#xff0c;从小红书上也找到了不少的prompt&#xff0c;lexica.art上也有不少&#xff0c;主要是为了电商场景的一些测评&#xff1a; 小红书、civitai、Lexica、Liblib.ai、 depth o…...

协方差矩阵

将变量两两之间的协方差排成矩阵的形式&#xff0c;就是协方差矩阵。 用个例子来说明下&#xff0c;帮助理解。 下面这组数据有三个变量&#xff1a;身高x、体重y、年龄z&#xff0c;每个变量都有5个取值&#xff1a; 身高x&#xff08;cm&#xff09;体重y&#xff08;kg&a…...

0基础学习VR全景平台篇第117篇:利用插件地拍补地 - PS教程

上课&#xff01;全体起立~ 大家好&#xff0c;欢迎观看蛙色官方系列全景摄影课程&#xff01; 嗨&#xff0c;大家好&#xff0c;今天我们来介绍【PS利用插件地拍补地】。 之前已经教给大家补地插件的安装方法&#xff0c;今天我们教给大家如何使用这个插件进行补地。 首…...

git的命令操作

1、基本命令 目录 1、基本命令 创建 Git 存储库 添加文件/目录到索引 将更改提交到本地存储库 撤消上一次提交的更改 显示工作树状态 显示对工作树和索引的更改 显示提交日志 显示提交详细信息 重命名文件 从工作树和索引中移除文件 从工作树中移除未跟踪文件 将…...

Nginx+keepalived实现七层的负载均衡

1.keepalived VRRP 介绍 keepalived是什么&#xff1f; keepalived是集群管理中保证集群高可用的一个服务软件&#xff0c;用来防止单点故障。 keepalived工作原理 keepalived是以VRRP协议为实现基础的&#xff0c;VRRP全称Virtual Router Redundancy Protocol&…...

至少在两个数组中出现的值

给你三个整数数组 nums1、nums2 和 nums3 &#xff0c;请你构造并返回一个 元素各不相同的 数组&#xff0c;且由 至少 在 两个 数组中出现的所有值组成。数组中的元素可以按 任意 顺序排列。 示例 1&#xff1a; 输入&#xff1a;nums1 [1,1,3,2], nums2 [2,3], nums3 [3]…...

子女关于骨灰发生争议,骨灰该如何安置?

亲属去世后&#xff0c;争房产、争车辆、争存款的事情不少&#xff0c;但争骨灰却是稀罕事儿。近日&#xff0c;江苏省无锡市梁溪区人民法院审结了一起人格权案件&#xff0c;马某与继母因父亲老马骨灰安葬引发的纷争&#xff0c;历经2年多终于落幕。   老马与前妻离婚后&…...

android隐藏输入法的一些尝试,最后一个可行

一、背景&#xff1a; 基于android开发自己的输入法app&#xff0c;用户需要手动收起输入法 二、准备工作&#xff1a; 定义类 public class CustIMS extends InputMethodService {} 和 xml声明三、尝试验证&#xff1a; 1、CustIMS.hideWindow(); 结论&#xff1a;这个在…...

【go-zero】go-zero 脚手架 simple-admin 第一章:通过goctls生成rpc整个项目 | go-zero整合 ENT数据库orm框架

往期回顾 【simple-admin 开篇:安装 了解 goctls】https://ctraplatform.blog.csdn.net/article/details/133988572 本章内容 往期回顾一、simple-admin 创建rpc项目实战1、创建git仓库1.1、创建任意git仓库1.2、克隆到本地2、创建RPC项目2.1、goctls 安装 rpc项目2.2、复制项…...

Ubuntu 使用 nginx 搭建 https 文件服务器

Ubuntu 使用 nginx 搭建 https 文件服务器 搭建步骤安装 nginx生成证书修改 config重启 nginx 搭建步骤 安装 nginx生成证书修改 config重启 nginx 安装 nginx apt 安装&#xff1a; sudo apt-get install nginx生成证书 使用 openssl 生成证书&#xff1a; 到对应的路径…...

团队表 -多级团队设计

团队表 -多级团队设计 user_team团队表 &#xff0c;如果存在子团队 1.我们可以通过每一个团队字段加一个parentid &#xff08;相当于一对多的关系&#xff09; 2.还可以设置一个字段CodingNum,比如这样: //系统为了管理查询团队自动生成的有序编号 可以使用3位数代表一个…...

LeetCode每日一题——2103. Rings and Rods

文章目录 一、题目二、题解 一、题目 There are n rings and each ring is either red, green, or blue. The rings are distributed across ten rods labeled from 0 to 9. You are given a string rings of length 2n that describes the n rings that are placed onto the…...

ant-design-vue form表单自定义校验规则

<a-form-itemlabel"市场价"class"status-barcode"name"marketPrice":rules"[{ required: true, message: },{ validator: validateNumber },]"><a-inputshow-count:maxlength"10"v-model:value"formState.ma…...

Xshell远程连接Kali(默认 | 私钥)Note版

前言:xshell远程连接&#xff0c;私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...

centos 7 部署awstats 网站访问检测

一、基础环境准备&#xff08;两种安装方式都要做&#xff09; bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats&#xff0…...

Golang dig框架与GraphQL的完美结合

将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用&#xff0c;可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器&#xff0c;能够帮助开发者更好地管理复杂的依赖关系&#xff0c;而 GraphQL 则是一种用于 API 的查询语言&#xff0c;能够提…...

2025 后端自学UNIAPP【项目实战:旅游项目】6、我的收藏页面

代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口&#xff08;适配服务端返回 Token&#xff09; export const login async (code, avatar) > {const res await http…...

C++.OpenGL (10/64)基础光照(Basic Lighting)

基础光照(Basic Lighting) 冯氏光照模型(Phong Lighting Model) #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...

Mac下Android Studio扫描根目录卡死问题记录

环境信息 操作系统: macOS 15.5 (Apple M2芯片)Android Studio版本: Meerkat Feature Drop | 2024.3.2 Patch 1 (Build #AI-243.26053.27.2432.13536105, 2025年5月22日构建) 问题现象 在项目开发过程中&#xff0c;提示一个依赖外部头文件的cpp源文件需要同步&#xff0c;点…...

LLMs 系列实操科普(1)

写在前面&#xff1a; 本期内容我们继续 Andrej Karpathy 的《How I use LLMs》讲座内容&#xff0c;原视频时长 ~130 分钟&#xff0c;以实操演示主流的一些 LLMs 的使用&#xff0c;由于涉及到实操&#xff0c;实际上并不适合以文字整理&#xff0c;但还是决定尽量整理一份笔…...

毫米波雷达基础理论(3D+4D)

3D、4D毫米波雷达基础知识及厂商选型 PreView : https://mp.weixin.qq.com/s/bQkju4r6med7I3TBGJI_bQ 1. FMCW毫米波雷达基础知识 主要参考博文&#xff1a; 一文入门汽车毫米波雷达基本原理 &#xff1a;https://mp.weixin.qq.com/s/_EN7A5lKcz2Eh8dLnjE19w 毫米波雷达基础…...

41道Django高频题整理(附答案背诵版)

解释一下 Django 和 Tornado 的关系&#xff1f; Django和Tornado都是Python的web框架&#xff0c;但它们的设计哲学和应用场景有所不同。 Django是一个高级的Python Web框架&#xff0c;鼓励快速开发和干净、实用的设计。它遵循MVC设计&#xff0c;并强调代码复用。Django有…...

Netty自定义协议解析

目录 自定义协议设计 实现消息解码器 实现消息编码器 自定义消息对象 配置ChannelPipeline Netty提供了强大的编解码器抽象基类,这些基类能够帮助开发者快速实现自定义协议的解析。 自定义协议设计 在实现自定义协议解析之前,需要明确协议的具体格式。例如,一个简单的…...