vuex 设计思路和实现方式

目录
  • vuex 设计思路和实现
    • vuex 设计思路
    • vue 响应式设计,依赖监听、依赖收集

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) {
  /* other... */
  var silent = Vue.config.silent;
  Vue.config.silent = true;
  store._vm = new Vue({ // 创建一个vue 实例
    data: {
      $$state: state
    },
    computed: computed
  });
  Vue.config.silent = silent;
/* other... */
}

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

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

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

// 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 /* asRootData */)
  }
  // 当组件存在 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原理

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

(0)

相关推荐

  • vue组件库的在线主题编辑器的实现思路

    一般而言一个组件库都会设计一套相对来说符合大众审美或产品需求的主题,但是主题定制需求永远都存在,所以组件库一般都会允许使用者自定义主题,我司的vue组件库hui的定制主题简单来说是通过修改预定义的scss变量的值来做到的,新体系下还做到了动态换肤,因为皮肤本质上是一种静态资源(CSS文件和字体文件),所以只需要约定一种方式来每次动态请求加载不同的文件就可以了,为了方便这一需求,还配套开发了一个Vessel脚手架的插件,只需要以配置文件的方式列出你需要修改的变量和值,一个命令就可以帮你生成对应的皮

  • Vuex数据持久化实现的思路与代码

    什么是vuex vuex :是一个专为vue.js开发的状态管理器,采用集中式存储的所有组件状态 五个属性: state.getters.mutations.actions.module 基本使用: 新建store.js文件,最后在main.js中引入,并挂载到实列上 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const state = {} const getters = {} const mutations = {

  • 详解vue + vuex + directives实现权限按钮的思路

    遇到了一个业务场景: 某个按钮按下去之前需要先判断它是否登陆,如果没有登陆需要跳转到对应的登陆页面,否则就继续该按钮之后的操作. 对于这种问题,很显然不能每个按钮都去判断,所以我思考了一下结合自定义指令和vuex完成了相应的实现. 主要的代码实现 const directive = Vue.directive('permission-click', { bind: (el, binding, vnode) => { el.addEventListener('click', (e) => { i

  • vuex实现历史记录的示例代码

    最近自研着一个可视化操作平台,其中涉及到用户操作后可撤销或重做,在网上搜了一些解决思路,完善自己所设想的解决思路. 历史记录需求的要点 可存储在 localStorage 中 可多次撤销或多次重做 点击列表中的一项,将历史倒退或前进至指定位置 看似简单的需求,在基础建设设计上的错误,亦会在未来导致更多的工作量.所以结合上面两点的要求,发现 vuex 的基本思路非常适合完成这个需求,redux 同样. 实现思路 此项目用了 typescript 来加强代码的严谨性,方便日后维护,大家简单看个思路.

  • vuex 设计思路和实现方式

    目录 vuex 设计思路和实现 vuex 设计思路 vue 响应式设计,依赖监听.依赖收集 vuex 设计思路和实现 API概念的东西就不介绍了, 如果还不了解vuex 的应用, 可以去查看官方vuex文档 . 下面着重讲解 vuex的原理以及实现 vuex 设计思路 vuex是使用插件机制开发的, vuex 中的 store 本质就是没有template的隐藏着的vue实例 在beforeCreate 混入vuexInit ,vuexInit方法实现了store注入vue组件实例,并注册了vu

  • 网上考试设计思路是怎样的?

    global.asa < script LANGUAGE=VBScript RUNAT=Server > Sub Application_OnStart dbPath = "DBQ=" & Server.Mappath("onlinetest.mdb") dbConnectionString =  "DRIVER={Microsoft Access Driver (*.mdb)}; " & dbPath Set App

  • MySQL备份恢复设计思路

    背景 首先交代一下背景,由于某些因素的限制,我们公司目前的备份策略采用的是隔天全备的方案,增量备份则使用的是binlog server的方式,那么如何快速恢复就成为了我们需要思考的问题 恢复需求 根据我以往的一些经验来说,通常需要从备份恢复数据的场景有如下几种: 1.被误删库了 2.被误删表了,类型为TRUNCATE或者DROP 3.被误删列了,类型为ALTER ... DROP COLUMN 4.被误删数据了,类型为DELETE或者UPDATE或者REPLACE 5.表空间损坏或出现坏块了 根

  • Docker容器定时备份数据库并发送到指定邮箱(设计思路)

    目录 一.背景: 二.设计思路: 三.编写启动脚本 四.构建镜像 五.添加边车容器 5.1 创建配置文件 5.2 创建有状态服务部署文件 六.测试 项目地址及使用说明:https://gitee.com/noovertime/mysqlmail 一.背景: 一开始的初衷是,想写一个脚本来监控服务器的高占用率进程并通过邮件发送给我,然后突发奇想,可以使用这种方式来备份我的数据库,开始动手! 二.设计思路: 通过编写shell脚本,调用linux的mail工具,mysqldump的方式来保存数据库的

  • Flex实现双轴组合图的设计思路及代码

    1.设计思路 (1)设计一个组合图,该图共用一个数据源 (2)组合图是有柱状图和折线图组合的 (3)柱状图显示的数据是依据左边的竖直轴,折线图的数据依据右边的竖直轴 2.源码如下 DoubleY.mxml: 复制代码 代码如下: <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:

  • 使用JavaScript实现网页版Pongo设计思路及源代码分享

    1.游戏背景介绍(写在前面的废话): 五月初的某天,看到某网推荐了这款游戏,Pongo,看着还不错的样子就用ipad下下来试玩了下,玩了两局感觉还错挺过瘾的,因为是手欠类游戏嘛大家懂的. 但是没一会发现游戏在ipad似乎有些bug,玩一会就会卡住然后只能强退了,真是揪心,记录还等着破呢. 怎么办?玩游戏不如玩自己的游戏的念头又邪恶的出现了,然后就把pad丢给了朋友虐心去,我默默回到电脑前开始动手自己写个不会卡的. 大概两小时吧,写出了基本框架,然后扔sinaapp里试了下效果基本能玩就洗洗睡了.

  • web前端vue之vuex单独一文件使用方式实例详解

    Vuex 是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试.状态快照导入导出等高级调试功能. 上次我用了一个加减的例子为大家讲解vuex的基本的使用方式,和在什么样的情况下使用.上次还是在一个组件内把这个例子简单的展示了下,这次我把vuex抽离出来一个

  • 基于SpringBoot实现自动装配返回属性的设计思路

    目录 一:需求背景 二:设计思路 三:使用方法 四:注解解析器(核心代码) 五:需要思考的技术点 一:需求背景 在业务开发中经常会有这个一个场景,A(业务表)表中会记录数据的创建人,通常我们会用userId字段记录该数据的创建者,但数据的使用方会要求展示该数据的创建者姓名,故我们会关联用户表拿该用户的姓名.还有一些枚举值的含义也要展示给前端.导致原本一个单表的sql就要写成多表的关联sql,以及枚举含义的转换很是恶心. 例如:业务对象BusinessEntity.java public clas

  • flask route对协议作用及设计思路

    目录 引言 flask route 设计思路 源码版本说明 flask route示例 flask route的作用 flask route的实现思路 werkzeug库中的Map与Rule在Flask中的应用 route的完整流程 总结 引言 本文主要梳理了flask源码中route的设计思路. 首先,从WSGI协议的角度介绍flask route的作用: 其次,详细讲解如何借助werkzeug库的Map.Rule实现route: 最后,梳理了一次完整的http请求中route的完整流程. f

  • Go 微服务开发框架DMicro设计思路详解

    目录 背景 概述 架构 设计理念 面向接口设计 会话 Session 消息 Message 协议 Proto 编码 Codec 连接 Socket 有机的组合 插件 Plugin 组件 未来展望 背景 DMicro 诞生的背景,是因为我写了 10 来年的 PHP,想在公司内部推广 Go, 公司内部的组件及 rpc 协议都是基于 swoole 定制化开发的.调研了市面上的各种框架,包括 beego,goframe,gin,go-micro,go-zero,erpc 等等,可能是我当时技术能力有限,

随机推荐