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核心原理

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/130484.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基础课19——客服系统知识库的搭建流程

1.收集整理业务数据 注意:我们在做业务数据收集时,往往是甲方提供给我们的,这时就需要确定一个标准,否则对知识库梳理工作会带来很大的难度,建议和甲方沟通确认一个双方都统一的知识库原材料。 2.创建知识库 在创建知…

Docker基础(简单易懂)

目录 一、docker是什么 核心概念 二、docker安装 1、卸载docker 2、使用yum 安装 三、docker常用命令 1、帮助命令 2、镜像命令 1)查看镜像 2)查询镜像 3)拉取镜像 4)删除镜像 3、容器命令 四、容器数据卷 五、Dock…

深度学习之基于Tensorflow人脸面部表情识别系统

欢迎大家点赞、收藏、关注、评论啦 ,由于篇幅有限,只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 基于Tensorflow的人脸面部表情识别系统是一种基于深度学习技术的图像处理应用,该系统主要通过人脸图像数…

CoCa论文笔记

摘要 计算机视觉任务中,探索大规模预训练基础模型具有重要意义,因为这些模型可以可以极快地迁移到下游任务中。本文提出的CoCa(Contrastive Captioner),一个极简设计,结合对比损失和captioning损失预训练一…

面试题:有一个 List 对象集合,如何优雅地返回给前端?

文章目录 1.业务背景每个对象里面都带上了重复的一个sessionId数据,我想提出来该怎么办? 2.实体类3.自定义Mapper和xml文件4.Service层5.Controller层 1.业务背景 业务场景中,一个会话中存在多个场景,即一个session_id对应多个sc…

c#字符串格式化

字符串格式化是一种将变量的值插入到字符串中的方法。它允许我们创建动态的字符串,其中包含变量的值。 string.Format 通过在字符串中使用占位符{0},{1}等,我们可以指定要插入的变量的位置。然后,通过在string.Format方法的参数…

Zabbix如何监控腾讯云NAT网关

1、NAT网关介绍 NAT 网关(NAT Gateway)是一种支持 IP 地址转换服务,提供网络地址转换能力,主要包括SNAT(Source Network Address Translation,源网络地址转换)和DNAT(Destination N…

如何使用Python和Matplotlib创建双Y轴动态风格折线图 | 数据可视化教程

前言 我的科研论文中需要绘制一个精美的折线图,我的折线图中有三条曲线,分别表示期望角速度指令信号,和实际的角速度信号,还有实际的航向角信号,现在我已经拥有了数据,使用Python中matplotlib.plt.plot来直…

421.数组中两个数的最大异或值

​​题目来源: leetcode题目,网址:421. 数组中两个数的最大异或值 - 力扣(LeetCode) 解题思路: int 型 数据有 32 位。从最高位开始逐位判断能否为 1,若可以,该位置 1,否…

Java线程的基本概念和五种状态

1. 线程 1.1 创建线程 创建线程通常有以下三种方式: 实现 Runnable 接口,并重写其 run 方法: public class J1_Method01 {public static void main(String[] args) {System.out.println("Main线程的ID为:" Thread.curr…

CentOS 7 通过 yum 安装 MariaDB(Mysql)

这一版取消了修改配置的操作,改成每次创建数据库时手动指定字符集编码;这一版取消了修改密码的操作,保留 MariaDB 使用无密码的情况,即密码是 ""。 安装步骤: 以下操作都以 root 用户进行操作 以下操作都以 …

公安涉密视频会议建设方案

公安涉密视频会议建设方案的制定需要考虑多方面因素。其一般是在复杂涉密网络环境中部署,怎样的内部保密部署方可保障涉密会议最大程度的加密进行呢?以下是从不同维度建设方案,可以根据实际应用场景进行相应的修改以及配置与之匹配的视频会议…

〔001〕虚幻 UE5 发送 get、post 请求、读取 json 文件

✨ 目录 🎈 安装 varest 扩展🎈 开启 varest 扩展🎈 发送 get 请求🎈 发送 post 请求🎈 读取 json 文件🎈 安装 varest 扩展 打开 虚幻商城,搜索 varest 关键字进行检索, varest 是一个 api 调用插件,支持 http/https 请求,也支持 json 文件的读取,最关键是该…

mermaid学习第一天/更改主题颜色和边框颜色/《需求解释流程图》

mermaid 在线官网: https://mermaid-js.github.io/ 在线学习文件: https://mermaid.js.org/syntax/quadrantChart.html 1、今天主要是想做需求解释的流程图,又不想自己画,就用了,框框不能直接进行全局配置&#xff0…

动态路由协议OSPF优化提速特性

1.OSPF协议通信过程与部署; 2.OSPF协议在项目上的应用场景; 3.OSPF有哪些优化特性? - OSPF - 开放式最短路径优先 - 一个动态路由协议 - 路由协议 - 理解魏 运行在路由器的一个软件 - 目的:为了帮助路由器和路由器彼…

Spring Boot 常见面试题

目录 1.Spring Boot 快速入门什么是 Spring Boot?有什么优点?Spring Boot 与 Spring MVC 有什么区别?Spring 与 Spring Boot 有什么关系?✨什么是 Spring Boot Starters?Spring Boot 支持哪些内嵌 Servlet 容器?如何设…

【LeetCode刷题-队列】--933.最近的请求次数

933.最近的请求次数 class RecentCounter {Queue<Integer> queue new LinkedList<>();public RecentCounter() {}public int ping(int t) {queue.offer(t);while(t - queue.peek() > 3000){queue.poll();}return queue.size();} }/*** Your RecentCounter obje…

游戏在小米设备上因自适应刷新率功能,帧率减半

1&#xff09;游戏在小米设备上因自适应刷新率功能&#xff0c;帧率减半 2&#xff09;Lua在计算时出现非法值&#xff0c;开启Debugger之后不再触发 3&#xff09;如何在Unity中实现液体蔓延的效果 这是第357篇UWA技术知识分享的推送&#xff0c;精选了UWA社区的热门话题&…

R语言gplots包的颜色索引表--全平台可用

R语言gplots包的颜色索引表–全平台可用

花了三年时间开发的开源项目,终于500 个 Star 了!快收藏

waynboot-mall 商城项目从疫情开始初期着手准备&#xff0c;到现在已经经过了 3 年多的时间&#xff0c;从项目初期到现在&#xff0c;一个人持续迭代&#xff0c;修复漏洞&#xff0c;添加功能&#xff0c;经历了前端开发工具从 vue2、vue-cli 切换到 vue3、vite 的转变&#…