详解如何实现一个简单的 vuex
首先我们需要知道为何要使用 vuex。父子组件通信用 prop 和自定义事件可以搞定,简单的非父子组件通信用 bus(一个空的 Vue 实例)。那么使用 vuex 就是为了解决复杂的非父子组件通信。
仅仅会使用 vuex 没什么,看过文档敲敲代码大家都会。难道你就不想知道 vuex 是如何实现的?!
抛开 vuex 的源码,我们先来想想如何实现一个简单的 "vuex"。有多简单呢,我不要 getter、mutation、action 等,我只要 state 就行了。
非父子组件通信
在实现之前,我们得来温故一下 bus 的实现,借用官网的例子:
var bus = new Vue() // 触发组件 A 中的事件 bus.$emit('id-selected', 1) // 在组件 B 创建的钩子中监听事件 bus.$on('id-selected', function (id) { // ... })
遥想当年,实例化后的 bus 不知放哪好,最后无奈将其放到了 window 下,一直 window.bus 的使用。虽然这样也没问题,但还是影响到了全局作用域。
突然的某一天,我发现可以挂载在 vue 的根实例下(从此告别 window.bus),于是便有了:
var app = new Vue({ el: '#app', bus: bus }) // 使用 bus app.$options.bus // or this.$root.$options.bus
然后又发现了,bus 其实不只是 on 事件才可以通信。其实 bus 是一个 Vue 实例,其中 data 是响应的。比如在 app 这个根实例下有两个非父子组件,都使用到了 bus 的 data,那么它们是响应同步的。
var bus = new Vue({ data: { count: 0 } })
以上,子组件 a 修改了 count,如果子组件 b 有用到 count,那么它就能响应到最新 count 的值。
说了这么多,你还没发现吗?这个不就是实现了非组件之间通信,vuex 的 state 吗?!
封装 bus
是的,把刚刚的 bus 封装一下,这个就是一个最简单的 "vuex" (仅仅只有 state 的功能)。首先,我们将有一个根实例 app ,实例下有两个非父子组件 childA 和 childB 。
html 代码的实现如下:
<div id="app"> <child-a></child-a> <child-b></child-b> </div>
非父子组件的实现
然后是两个非父子组件和 app 的实现,子组件都使用到了 bus 的 count,这里用 store.state 表示,跟 vuex 一致:
// 待实现 const store = new Store(Vue, { state: { count: 0 } }) // 子组件 a const childA = { template: '<button @click="handleClick">click me</button>', methods: { handleClick () { this.$store.state.count += 1 } } } // 子组件 b const childB = { template: '<div>count: {{ count }}</div>', computed: { count () { return this.$store.state.count } } } new Vue({ el: '#app', components: { 'child-a': childA, 'child-b': childB }, store: store })
看到代码里还有一个 Store 待实现。所需要的参数,因为这里懒得用 Vue.use() ,所以直接将 Vue 作为参数传入以供使用,然后第二个参数跟我们使用 vuex 传入的参数一致。
Store 的实现
接下来就是 Store 的实现,两步实现:
- 创建一个 bus 实例;
- 让子组件都能访问到 this.$store。
第 1 步骤上面已经有了,第 2 步骤主要用到了 Vue.mixin 来全局混入,但仅仅只是找到有 store 的根实例并赋值 Vue 原型上的 store,也能够让根实例 app 不用专门写 mixins 混入。
class Store { constructor (Vue, options) { var bus = new Vue({ data: { state: options.state } }) this.install(Vue, bus) } install (Vue, bus) { Vue.mixin({ beforeCreate () { if (this.$options.store) { Vue.prototype.$store = bus } } }) } }
实现的 Store 就是一个简单的 "vuex",它拥有了 vuex 的 state,足够让非父子组件之间进行简单通信。
在 Store 的构造函数里创建一个 bus 实例,并将其注入 Vue 的原型,实现了组件都能访问到 this.$store 即 bus 实例。 this.$store 就是一个 Vue 实例,所以访问了 this.$store.state.count 实际上就是访问到了 data,从而实现了非父子组件之间的响应同步。全部源码参考这里 。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- objective-C 的内存管理之-自动释放池(autorelease pool)
- objective-C 的内存管理之-引用计数
- CompoundButton.OnCheckedChangeListener与RadioGroup.OnCheckedChangeListener冲突
- Liora Rosin & Golan Levi:在北京驾车看洛杉矶的落日
- iphone/ipad/itouch进入DFU模式最简单的操作办法
- 微信小程序for循环里条件判断
- objective-C 的OOP(下)-类(static)方法、实例方法、overwrite(覆写)、属性(property)
- 你真的会玩SQL吗?删除重复数据且只保留一条
- activity结束之后刷新之前的activity的内容
- 徐扬生:与机器人共建未来社会
- Aerospike在实时竞价广告中的应用
- objective-C 的Hello World!
- objective-C 的代码文件组织
- objective-C 的OOP(上)--类定义、继承及方法调用
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 「R」Rprofile:R 全局设置
- Jmetal Problem和Problem Set的变量范围
- 简单工厂、工厂方法、抽象工厂的比较与分析
- 用一张组织架构图说清楚类和对象
- 一起来学matlab-matlab学习笔记8 基本绘图命令_3 特殊图形绘制
- 看了这个有趣的例子,你就秒懂多线程同步了
- IDA7.0 配置内核调试,双机调试
- ViewPager2与Fragment
- SpringBoot整合SpringSecurity实现JWT认证
- 用Python爬取股票数据,绘制K线和均线并用机器学习预测股价(来自我出的书)
- 用非常硬核的JAVA序列化手段实现对象流的持久化保存
- 微信小程序语音同步智能识别的实现案例
- 数据结构之链式队列的代码实现及有趣应用
- 用自定义链式栈解决力扣括号匹配问题
- String及StringTable(三):StringBuilder源码解读