我的编程空间,编程开发者的网络收藏夹
学习永远不晚

vuex 设计思路和实现方式

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

vuex 设计思路和实现方式

vuex 设计思路和实现

API概念的东西就不介绍了, 如果还不了解vuex 的应用, 可以去查看官方vuex文档 。

下面着重讲解 vuex的原理以及实现

vuex 设计思路

vuex是使用插件机制开发的, vuex 中的 store 本质就是没有template的隐藏着的vue实例

在beforeCreate 混入vuexInit ,vuexInit方法实现了store注入vue组件实例,并注册了vuex store的引用属性·$store

在这里插入图片描述

vuex 设计思路源码

  // vuex插件公开的install方法
  function install (_Vue) {
    if (Vue && _Vue === Vue) {
      {
        console.error(
          '[vuex] already installed. Vue.use(Vuex) should be called only once.'
        );
      }
      return
    }
    Vue = _Vue;
    applyMixin(Vue);
  }
  
   var index_cjs = {
    Store: Store,
    install: install, // 开放出去install方法, 直接在项目中使用这个插件
    version: '3.4.0',
    mapState: mapState,
    mapMutations: mapMutations,
    mapGetters: mapGetters,
    mapActions: mapActions,
    createNamespacedHelpers: createNamespacedHelpers
  };
  return index_cjs;
// 混入到项目中
function applyMixin (Vue) {
   var version = Number(Vue.version.split('.')[0]);
   if (version >= 2) {
     Vue.mixin({ beforeCreate: vuexInit }); // 在生命周期beforeCreate创建全局混入函数
   } else {
     // 覆盖初始化并注入vuex初始化过程
	// 1.x 以上版本兼容。
     var _init = Vue.prototype._init;
     Vue.prototype._init = function (options) {
       if ( options === void 0 ) options = {};
       options.init = options.init
         ? [vuexInit].concat(options.init)
         : vuexInit;
       _init.call(this, options);
     };
   }
   function vuexInit () { // Vuex 初始化钩子,注入到每个实例初始化钩子列表中
	   var options = this.$options;
	   // store injection
	   if (options.store) {
	     this.$store = typeof options.store === 'function'
	       ? options.store()
	       : options.store;
	   } else if (options.parent && options.parent.$store) {
	     this.$store = options.parent.$store;
	   }
	}
}
// 使用Vue实例来存储状态树
// 隐藏警告,以防用户添加了, 一些优先的 global mixins
function resetStoreVM (store, state, hot) {
  
  var silent = Vue.config.silent;
  Vue.config.silent = true;
  store._vm = new Vue({ // 创建一个vue 实例
    data: {
      $$state: state
    },
    computed: computed
  });
  Vue.config.silent = silent;

}

vue 响应式设计,依赖监听、依赖收集

想深刻理解 vuex 的设计思路。

要明白 vue 对象数据 Object.defineProperty ,getter/setter 方法的代理劫持的原理

// class="lazy" data-src/core/instance/state.js
// 初始化组件的state
export function initState (vm: Component) {
  vm._watchers = []
  const opts = vm.$options
  if (opts.props) initProps(vm, opts.props)
  if (opts.methods) initMethods(vm, opts.methods)
  // 当组件存在data属性
  if (opts.data) {
    initData(vm)
  } else {
    observe(vm._data = {}, true )
  }
  // 当组件存在 computed属性
  if (opts.computed) initComputed(vm, opts.computed)
  if (opts.watch && opts.watch !== nativeWatch) {
    initWatch(vm, opts.watch)
  }
}

vuex 就是实现了带有计算属性的 data 数据, 原理和 initComputed、 initData 是一致的

如果上面已经完全理解,想更深度了解响应式依赖 继续阅读vue的computed、vm.$data原理

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。 

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

vuex 设计思路和实现方式

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

vuex 设计思路和实现方式

这篇文章主要介绍了vuex 设计思路和实现方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
2022-11-13

云服务器设计思路和方法

云服务器(CloudDistributedServer,简称CDP)是一种基于互联网的服务器解决方案,可以提供高可靠性和高性能的计算环境。在云计算系统中,服务器通常由多台计算机组成,其中一台用于提供计算资源,其他计算机则在服务器之间共享资源。为了确保云计算系统的高可靠性,通常需要采用一些技术和方法。虚拟化技术:通过将多台计算机虚拟成一台台服务器,可以提高系统的整体可用性和效率。常见的虚拟化技术包括NFV和SpanningTree等。容错...
2023-10-27

云服务器网络搭建方案设计思路和方法

网络设计在搭建云服务器网络时,需要选择合适的网络拓扑结构和协议。网络拓扑结构应该满足网络负载均衡、数据传输效率等需求。协议应该选择支持各种云服务器应用场景的协议,如HTTP、FTP、SOAP、RMI、DNS、DDNS等。此外,网络还需要进行安全性的考虑,包括防火墙、VPN、SSL等措施。硬件选择云服务器需要支持多种硬件
2023-10-27

Golang RabbitMQ: 实现分布式任务调度的思路和方案

实现分布式任务调度的思路和方案可以基于RabbitMQ来实现。下面是一个可能的方案:1. 定义任务队列:创建一个RabbitMQ队列,用于存储待执行的任务。2. 配置任务消费者:创建多个任务消费者,每个消费者在不同的机器上运行。消费者通过订
2023-10-10

BufferQueue的设计思想和内部实现方法是什么

这篇文章主要介绍“BufferQueue的设计思想和内部实现方法是什么”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“BufferQueue的设计思想和内部实现方法是什么”文章能帮助大家解决问题。1.
2023-06-05

基于redis实现的点赞功能设计思路详解

前言 点赞其实是一个很有意思的功能。基本的设计思路有大致两种, 一种自然是用mysql等 数据库直接落地存储, 另外一种就是利用点赞的业务特征来扔到redis(或memcache)中, 然后离线刷回mysql等。 直接写入Mysql 直接写
2022-06-04

队列在PHP与MySQL中的负载均衡和自动扩容的设计思路和实现方案

一、引言队列是一种常用的数据结构,可以在PHP与MySQL中实现负载均衡和自动扩容的设计。本文将介绍队列的基本概念和使用场景,并提供针对PHP与MySQL的负载均衡和自动扩容的设计思路和实现方案。二、队列的基本概念队列是一种先进先出(FIF
2023-10-21

队列在PHP与MySQL中的消息分发和任务调度的设计思路和实现方案

一、引言随着互联网应用规模的不断扩大和用户需求的日益增长,系统的并发处理和任务调度能力成为一个重要的考量因素。而队列是一种常用的解决方案,能够有效地进行消息分发和任务调度。本文将介绍在PHP与MySQL中如何设计和实现队列的消息分发和任务调
2023-10-21

Golang Facade模式的设计思想与实现原理

Golang中的Facade模式是一种结构型设计模式,它提供了一个统一的接口,用于隐藏子系统的复杂性,使得子系统更容易使用。Facade模式通过提供一个简单的接口来封装一些复杂的操作,使得客户端可以更方便地与子系统交互。实现Facade模式
2023-10-08

云服务器网络搭建方案设计思路和方法有哪些

1.确定网络拓扑结构在设计云服务器网络搭建方案时,首先需要确定网络拓扑结构。常见的网络拓扑结构有星型、环型、总线型、树型等。在云服务器网络搭建中,一般采用星型或树型结构,因为这两种结构具有较好的可扩展性和可管理性。2.确定网络设备在确定网络拓扑结构后,需要选择合适的网络设备。网络设备包括交换机、路由器、防火墙等。在选择网络设备时,需要考虑网络规模、带宽、安全性等因素。3.划分子网在确定网络设备后,需要划...
2023-10-27

介绍设计适合Hadoop的数据模型的方法和思路

设计适合Hadoop的数据模型需要考虑以下几个方面:数据存储格式:Hadoop中常用的数据存储格式包括文本格式、序列文件格式、Avro格式、Parquet格式等。选择适合的数据存储格式可以有效提高数据的读取和处理效率。数据分区:在设计数据模
介绍设计适合Hadoop的数据模型的方法和思路
2024-02-29

云服务器网络搭建方案设计思路和方法怎么写

2.配置路由器:在网络搭建之前,需要先配置路由器,实现不同网络设备的互联,以及数据的交换和传输。路由器需要提供可靠的路由功能,以保证数据的传输。3.建立网络连接:可以使用各种网络设备,如交换机、路由器、防火墙等,建立起稳定可靠的网络连接,并进行相关配置和管理。4.搭建DNS服务器:DNS服务器是云服务器的重要组成部分,需要搭建一个稳定可靠的DNS服务器,向用户提供域名解析服务。可以使用各种云平台服务商提...
2023-10-27

进到思科路由器配置模式的实现方法

  相信有不少的朋友都应该使用过思科路由器吧,毕竟这一种路由器的优点真的很多。最近有很多的朋友都在问小编应该怎样进入Cisco路由器配置模式呢?于是小编就写了这篇教程:进到思科路由器配置模式的实现方法。  在Cisco路由器配置模式里面命令行端口使用一个分等级的结构,那么这一个结构就需要登录到不一样的模式下面来完成详细
进到思科路由器配置模式的实现方法
2024-04-17

实现和设计Golang的分布式系统

Golang分布式系统的设计与实现引言:随着互联网的迅速发展,人们对分布式系统的需求越来越高。分布式系统能够提供高可用性、伸缩性和容错性,使得系统能够应对大量请求和并发。而Golang作为一门现代化的编程语言,以其高效的并发能力和简单易用
实现和设计Golang的分布式系统
2024-01-16

Java设计模式之中介者模式的实现方式

Java中介者模式是一种行为型设计模式,它通过一个中介者对象来协调多个对象之间的交互,降低对象之间的耦合度,提高系统的可维护性和可扩展性。本文将介绍该设计模式的原理、使用场景和实现方法
2023-05-18

编程热搜

目录