详解如何实现一个简单的 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，从而实现了非父子组件之间的响应同步。全部源码参考这里 。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
Vuex简单入门
1.Vuex是什么? 学院派:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式:集中存储和管理应用的所有组件状态. 理解:以上这4个词是我们理解的关键.状态:什么是状态,我们可以通俗的理解为数据.Vue只关心视图层,那么视图的状态如何来确定?我们知道是通过数据驱动,这里的状态管理可以简单理解为管理数据.集中存储:Vue只关心视图,那么我们需要一个仓库(Store)来存储数据,而且是所有的数据集中存储,视图和数据就可以分析.管理:除了存储,还可以管理数据,也就是计算.处理数据.所有组
-
如何使用Vuex+Vue.js构建单页应用
前言:在最近学习 Vue.js 的时候,看到国外一篇讲述了如何使用 Vue.js 和 Vuex 来构建一个简单笔记的单页应用的文章.感觉收获挺多,自己在它的例子的基础上进行了一些优化和自定义功能,在这里和大家分享下学习心得. 在这篇教程中我们将通过构建一个笔记应用来学习如何在我们的 Vue 项目中使用 Vuex.我们将大概的过一遍什么是 Vuex.js,在项目中什么时候使用它,和如何构建我们的 Vue 应用. 这里放一张我们项目的预览图片: 项目源码:vuex-notes-app:有需要的同学可
-
Vuex之理解Store的用法
1.什么是Store? 上一篇文章说了,Vuex就是提供一个仓库,Store仓库里面放了很多对象.其中state就是数据源存放地,对应于与一般Vue对象里面的data(后面讲到的actions和mutations对应于methods). 在使用Vuex的时候通常会创建Store实例new Vuex.store({state,getters,mutations,actions})有很多子模块的时候还会使用到modules. 总结,Store类就是存储数据和管理数据方法的仓库,实现方式是将数据和方法
-
详解vuex 中的 state 在组件中如何监听
前言 不知道大家有没有遇到过这样一种情况? vuex中的state会在某一个组建中使用,而这个状态的初始化是通过异步加载完成的.组件在渲染过程中,获取的state状态为空.也就是说组件在异步完成之前就已经完成渲染了,导致组件的数据没有来得及渲染. 问题举例 举例说明如下: // topo.vue created() { this.getUserAndSysIcons(); }, methods: { getUserAndSysIcons() { const self = this; // 用户图
-
Vuex之理解Getters的用法实例
1.什么是getters 在介绍state中我们了解到,在Store仓库里,state就是用来存放数据,若是对数据进行处理输出,比如数据要过滤,一般我们可以写到computed中.但是如果很多组件都使用这个过滤后的数据,比如饼状图组件和曲线图组件,我们是否可以把这个数据抽提出来共享?这就是getters存在的意义.我们可以认为,[getters]是store的计算属性. 2.如何使用 定义:我们可以在store中定义getters,第一个参数是state const getters = {sty
-
Vuex之理解Mutations的用法实例
1.什么是mutations? 上一篇文章说的getters是为了初步获取和简单处理state里面的数据(这里的简单处理不能改变state里面的数据),Vue的视图是由数据驱动的,也就是说state里面的数据是动态变化的,那么怎么改变呢,切记在Vuex中store数据改变的唯一方法就是mutation! 通俗的理解mutations,里面装着一些改变数据方法的集合,这是Veux设计很重要的一点,就是把处理数据逻辑方法全部放在mutations里面,使得数据和视图分离. 2.怎么用mutation
-
基于vue2.0+vuex的日期选择组件功能实现
calendar vue日期选择组件 一个选择日期的vue组件 基于vue2.0 + vuex 原本是想找这样的一个组件的,查看了vuex后,发现vuex的写法还不是基于2.0的,所以就自己动手做了 demo展示&&项目中的使用 目录结构 demo 用vue-cli 的webpack-simple构建的 calendar |--dist build生成的目录 |--doc 展示图片 |--src |--assets 资源 |--components |--calendar 日期组件 |--
-
Vue.js实战之Vuex的入门教程
前言 在 Vue.js 的项目中,如果项目结构简单, 父子组件之间的数据传递可以使用 props 或者 $emit 等方式,详细点击这篇文章查看. 但是如果是大型项目,很多时候都需要在子组件之间传递数据,使用之前的方式就不太方便.Vue 的状态管理工具 Vuex 完美的解决了这个问题. 一.安装并引入 Vuex 项目结构: 首先使用 npm 安装 Vuex cnpm install vuex -S 然后在 main.js 中引入 import Vue from 'vue' import App
-
Vue.js实战之使用Vuex + axios发送请求详解
前言 Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource 目前主流的 Vue 项目,都选择 axios 来完成 ajax 请求,而大型项目都会使用 Vuex 来管理数据,所以这篇博客将结合两者来发送请求 Vuex 的安装将不再赘述,可以参考之前的Vue.js实战之Vuex的入门教程 使用 cnpm 安装 axios cnpm install axios -S 安装其他插件的时候,可以直接在 ma
-
详解如何实现一个简单的 vuex
首先我们需要知道为何要使用 vuex.父子组件通信用 prop 和自定义事件可以搞定,简单的非父子组件通信用 bus(一个空的 Vue 实例).那么使用 vuex 就是为了解决复杂的非父子组件通信. 仅仅会使用 vuex 没什么,看过文档敲敲代码大家都会.难道你就不想知道 vuex 是如何实现的?! 抛开 vuex 的源码,我们先来想想如何实现一个简单的 "vuex".有多简单呢,我不要 getter.mutation.action 等,我只要 state 就行了. 非父子组件通信 在
-
详解如何实现一个简单的Node.js脚手架
原因 在工作中,需要开发一个脚手架,用于给相关用户提供相关的开发便利性. 适合人群 对前端.Node操作有一定的了解,同时向了解脚手架开发过程或者需要自己实现一个脚手架的开发者. 目标 开发一个简单的脚手架,能够提供给用户进行安装. 能够输出相关提示. 对用户文件进行读写操作. 在脚手架中使用Shell脚本. 步骤 开发脚手架 脚手架的开发最开始过程与普通的前端项目相同,需要一个入口文件command.js和配置文件package.json. 与其他配置文件不同的是,需要在package.jso
-
详解log4j.properties的简单配置和使用
本文介绍了详解log4j.properties的简单配置和使用,分享给大家,具体如下: 简单log4j.properties配置示例 ### set log levels ### log4j.rootLogger = INFO , console , debug , error ### console ### log4j.appender.console = org.apache.log4j.ConsoleAppender log4j.appender.console.Target = Syst
-
详解mysql查询缓存简单使用
MySQL是一个关系型数据库管理系统,由瑞典MySQL AB 公司开发,属于 Oracle 旗下产品.MySQL 是最流行的关系型数据库管理系统之一,在 WEB 应用方面,MySQL是最好的 RDBMS (Relational Database Management System,关系数据库管理系统) 应用软件之一. 当我们开启Mysql的查询缓存,当执行完全相同的SQL语句的时候,服务器就会直接从缓存中读取结果.当数据被修改, 之前的缓存会失效,所以修改比较频繁的表不适合做查询缓存. 一.查询
-
详解Android封装一个全局的BaseActivity
1.前言 对于一个Android开发者来说,每一个页面都继承一个单独的系统Activity,有时候会带来很多不必要的困扰.比如:每一个页面会有重复的代码,阅读起来麻烦:每一次写新的页面功能总要打开原来的页面代码拷贝一部分过来:有时候代码调试排查问题也不方便等等. 如果你的项目里面没有将Activity都继承自一个自己封装的BaseActivity.或者针对自己封装的BaseActivity觉得还不够完善的,这篇博客可能会对你有帮助! 2.特点 封装:将所有Activity都用到的一部分代码封装到
-
详解Python3 定义一个跨越多行的字符串的多种方法
方法一:使用三引号 >>> str1 = '''Le vent se lève, il faut tenter de vivre. 起风了,唯有努力生存. (纵有疾风起,人生不言弃.)''' >>> str1 'Le vent se lève, il faut tenter de vivre. \n起风了,唯有努力生存.\n(纵有疾风起,人生不言弃.)' >>> print(str1) Le vent se lève, il faut tenter
-
详解如何创建一个.NET Core工程
1.打开VS2019,点击“创建新项目”,选择“ASP.NET Core Web应用”,设置路径和文件名,选择目标框架(.net core3.1长期支持),配置HTTPS(选勾),点击“创建”,自此就创建了一个.net core工程. 2.工程目录和文件介绍 Properties—>launchSettings.json :项目配置文件 appsettings.json:应用配置文件,类似web.config wwwroot:内容目录,存放静态文件 Program.cs:控制台应用 Startu
-
详解如何实现一个Kotlin函数类型
目录 接口与函数类型 总结 接口与函数类型 业务开发中,经常会有实现一个函数式接口(即接口只有一个方法需要实现)的场景,大家应该都会不假思索的写出如下代码: interface Callback { fun response(): String } class Achieve: Callback { override fun response(): String { return "" } } 这么写当然没什么毛病,甚至为了让kotlin支持对接口Callback的SAM转换,你还可以
-
详解小程序之简单登录注册表单验证
这段时间在做员工管理的小程序,前期在登录注册上花了不少功夫,今天就给大家分享下. 效果图,wxss的内容较简单,自己编写即可. ##主要内容 一.首先我是在util.js中引入表单正则验证规则,给予login.js来引用 function regexConfig() { var reg = { userid: /^[A-Za-z0-9]+$/, //邮箱正则验证 phone: /^1(3|4|5|7|8)\d{9}$/, //手机号正则验证 cards: /^[\u4e00-\u9fa5]{2,
-
详解用python实现简单的遗传算法
今天整理之前写的代码,发现在做数模期间写的用python实现的遗传算法,感觉还是挺有意思的,就拿出来分享一下. 首先遗传算法是一种优化算法,通过模拟基因的优胜劣汰,进行计算(具体的算法思路什么的就不赘述了).大致过程分为初始化编码.个体评价.选择,交叉,变异. 遗传算法介绍 遗传算法是通过模拟大自然中生物进化的历程,来解决问题的.大自然中一个种群经历过若干代的自然选择后,剩下的种群必定是适应环境的.把一个问题所有的解看做一个种群,经历过若干次的自然选择以后,剩下的解中是有问题的最优解的.当然,只