vuex与全局变量区别_挑战全网最幽默的Vuex系列教程:第一讲 Vuex到底是什么鬼
先说两句
官方已经有教程了,为什么还要写这个教程呢?说实话,还真不是我闲着蛋疼,官方的教程真的是太官方了,对于刚入门 Vuex 的童鞋来说,想必看官方的教程,很多地方就如同看圣经一样,比如「欧玛尼玛尼牙」,所有的字都认识,就是不知道说些什么玩意,不信,你可以戳进去看看。
当然,对于大神级别一看就懂的,那就不用说了,肯定是看官方的更权威。还有,如果对 Flux、Redux、The Elm Architecture 比较熟悉的话,也可以移步官方,因为官方也说了,Vuex 的套路基本上都是从那边吸取整合后,过渡而来的,只不过,Vuex 只钟情于 Vue.js 罢了。
我之所以写这个教程,主要是因为自己刚刚开始和 Vuex 打交道的时候,痛过了、苦过了、伤过了,所以痛定思痛,为了能让自己更好的驾驭 Vuex,也为了不让新来的童鞋们被 Vuex 调戏过后无处诉苦,所以方才决定把官方的这些抽象的文字和概念,用连你身后的鼓励师小姐姐都能看懂的语言,分享出来,助你在前端的道路上越走越顺,顺利的找到一份有鼓励师陪伴的工作。
再说一句
Vuex 是 Vue.js 的座驾,所以,如果还不懂Vue.js 的话,那还是先把 Vue.js 勾搭上了再带过来一起坐坐吧。当然,既然能够溜达到这里,想必跟 Vue.js 起码也已经是朋友了吧。
有点啰嗦,不要嫌弃,写教程也需要有点前戏,毕竟是第一次。
安装
关于 Vuex 的具体安装,就不在这里说了,这个官方还是比较清晰的,戳此进入。但是需要注意两点:
- 在一个模块化的打包系统中,您必须显式地通过 Vue.use() 来安装 Vuex,比如: import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) // 必须调用此函数来注入 Vuex
- 当使用全局 script 标签引用 Vuex 时,就不用那么麻烦了,直接引用进来就好,但要注意引用的先后顺序,如下: // 在 Vue 之后引入 vuex 会进行自动安装
虽然 script 的方式看起来比较自动化,但是接触得多了,你就会明白模块化其实才是我们的最佳姿势。
揭开 Vuex 的神秘面纱
拿到一个工具,我们第一时间需要弄明白的,就是这个工具到底能够帮助我们解决什么问题。比如锤子,砸得了鸡蛋打得了电话,比如苹果,不但能吃还能玩。那么 Vuex 呢,如果把 Vue.js 比喻成路人(走路的人)的话,那么 Vuex 就是他的桑塔纳,如果他想去隔壁买包烟,那走过去就行了,开个车过去反而是一种负担,但是如果他想去几十公里的学校采花,那桑塔纳就得派上用场了,不然等他走过去,可能花儿都谢了。
当然,类比只是为了告诉我们 Vuex 的价值所在,那么在具体在实际的应用中,它能干什么?什么时候才需要翻它的牌呢?
我们先来看一段官方代码:
new Vue({ // state 数据源 data () { return { count: 0 } }, // view 视图 template: `
{{ count }}
`, // actions 事件 methods: { increment () { this.count++ } }})
这是一个很简单的增长型计数功能页面,和 Vue.js 有一腿的,应该秒懂。通过事件 increment,实现 count 增长,然后渲染到界面上去。
这种方式其实就跟走路买烟一样,属于短途效应,官方称作为「单向数据流」,很好理解。
但是,情况变了,现在有两个页面 A 和 B,还有以下两个要求:
- 要求它们都能对 count 进行操控。
- 要求 A 修改了 count 后,B 要第一时间知道,B 修改后,A 也要第一时间知道。
怎么办?稍微有点开发经验的,就能够很容易的想到,把数据源 count 剥离开来,用一个全局变量或者全局单例的模式进行管理,这样不就在任何页面都可以很容易的取到这个状态了。
是啊,这尼玛就是 Vuex 背后的思想啊,它干的就是这个事情。是不是有一种被 Vuex 这个高大上的名号所坑害的感觉,不就是全局模型吗,不用它也同样可能搞定嘛。
是的,也可以搞定,就像没有桑塔纳,你也可以去学校看花一样,只是经历的过程不一样了。
Vuex 的目的是为了管理共享状态,为了达到这个目的,它制定了一系列的规则,比如修改数据源 state、触发 actions 等等,都需要遵循它的规则,以此来达到让项目结构更加清晰且易于维护的目的。
那么我们再来看看官方的描述:
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
有没有瞬间清晰多了。
什么时候翻 Vuex 的牌
其实了解了 Vuex 要干的活以后,什么时候翻牌,那就容易选择得多了。就像前面的类比一样,去隔壁买包烟,你还开个桑塔纳,找停车位的时间,烟都抽完了。
所以,我们要根据项目的需要,来衡量短期和长期的效益,如果不打算开发大型的单页应用,那 Vuex 可能还是你的一个负担。对于一些不大不小的项目,自己又懒得走,开车又觉得麻烦,那你骑个共享单车过去也行嘛。
这里的共享单车指代的是官方中的一个简单的 store 模式,其实就是一个单纯的全局对象。
关于全局对象和 Vuex 之间的区别,官方写得还是比较通俗易懂的:
Vuex 和单纯的全局对象有以下两点不同:
Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。 你不能直接改变 store 中的状态。改变 store 中状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化,从而让我们能够实现一些工具帮助我们更好地了解我们的应用。
简单示例
// 如果在模块化构建系统中,请确保在开头调用了 Vue.use(Vuex)const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } }})
每一个 Vuex 应用的核心就是 store(仓库)。store 基本上就是一个容器,它包含着你的应用中大部分的状态 (state)。
注意:如果 mutations 不知道是什么,没关系,后面会专门讲解到,可以单纯的理解为只能用它里面的方法来修改 state 中的数据。
store.commit('increment') // 调用 mutations 中的方法console.log(store.state.count) // -> 1
为什么要这样设计的,官方也给出了具体的原因:
我们通过提交 mutation 的方式,而非直接改变 store.state.count,是因为我们想要更明确地追踪到状态的变化。这个简单的约定能够让你的意图更加明显,这样你在阅读代码的时候能更容易地解读应用内部的状态改变。此外,这样也让我们有机会去实现一些能记录每次状态改变,保存状态快照的调试工具。有了它,我们甚至可以实现如时间穿梭般的调试体验。
由于 store 中的状态是响应式的,在组件中调用 store 中的状态简单到仅需要在计算属性中返回即可。触发变化也仅仅是在组件的 methods 中提交 mutation。
如果最后一句话没看懂,没关系,下一章马上就会讲到。
PS
来点正经的,到这里,第一篇其实就已经写完了,当然,这里的内容都是我看了官方的教程后,自己的一个理解,如果有理解不到位的地方,欢迎拍砖。
转载声明:
作者:大宏说
原文链接: https://www.jianshu.com/p/120eaf50331c
后记
以上就是胡哥今天给大家分享的内容,喜欢的小伙伴记得点赞、收藏呀,关注胡哥有话说,学习前端不迷路,欢迎多多留言交流...
胡哥有话说,一个有技术,有情怀的胡哥!现任京东前端攻城狮一枚。
胡哥有话说,专注于大前端技术领域,分享前端系统架构,框架实现原理,最新最高效的技术实践!
vuex与全局变量区别_挑战全网最幽默的Vuex系列教程:第一讲 Vuex到底是什么鬼相关推荐
- Vuex白话教程第一讲:Vuex到底是个什么鬼?
Vuex白话教程第一讲:Vuex到底是个什么鬼? Vuex白话教程第二讲:Vuex旗下的State和Getter Vuex白话教程第三讲:Vuex旗下的Mutation Vuex白话教程第四讲:Vue ...
- 挑战全网最幽默的Vuex系列教程:第一讲 Vuex到底是什么鬼
先说两句 官方已经有教程了,为什么还要写这个教程呢?说实话,还真不是我闲着蛋疼,官方的教程真的是太官方了,对于刚入门 Vuex 的童鞋来说,想必看官方的教程,很多地方就如同看圣经一样,比如「欧玛尼玛尼 ...
- python爆破端口_挑战全网多线程批量扫描爆破弱办事端口工具,Python制造专属!...
挑战全网多线程批量扫描&爆破弱办事端口工具,Python制造专属!-1.jpg (29.47 KB, 下载次数: 0) 2018-8-16 17:05 上传 前言 你学习Python的目的是什 ...
- docker 镜像修改的配置文件自动还原_原创 | 全网最实在的docker入门教程四
作者:潘吉祥 上一篇我们学习了如何使用Dockerfile制作自己的镜像,不过这种方式更像纯粹的运维方式,作为开发者来说,未免有些小繁琐,一个不小心写错些命令就执行失败,我们还不知道错误在哪,这着实有 ...
- Vuex教程第一讲:Vuex到底是个什么--01
先说两句 官方已经有教程了,为什么还要写这个教程呢?说实话,还真不是我闲着蛋疼,官方的教程真的是太官方了,对于刚入门 Vuex 的童鞋来说,想必看官方的教程,很多地方就如同看圣经一样,比如「欧玛尼玛尼 ...
- Vuex 白话教程第一讲:Vuex 到底是个什么鬼?
转载出处:简书作者 大宏说 作者链接:大宏说 先说两句 官方已经有教程了,为什么还要写这个教程呢?说实话,还真不是我闲着蛋疼,官方的教程真的是太官方了,对于刚入门 Vuex 的童鞋来说,想必看官方的教 ...
- Vue.js 系列教程 4:Vuex
原文:intro-to-vue-4-vuex 译者:nzbin 这是关于 JavaScript 框架 Vue.js 五个教程的第四部分.在这一部分,我们会学习使用 Vuex 进行状态管理.这个系列教程 ...
- python find函数 和index的区别_【全网最简单Python教程】--10.列表元素的索引和返回索引值(Index函数使用)...
在练习日4中,小鱼给大家讲述了神秘的ASCII码编译及解密过程. 在ASCII码中,字符与十进制数字的互相转换是通过 ord()函数和chr()函数. 今天小鱼要给大家介绍另一种在影视剧.侦探小说中更 ...
- mesh和wifi中继的区别_一文读懂:小米Wi-Fi6路由器上的Mesh到底是什么?
最近,小米第二款Wi-Fi6路由器,也就是小米路由器AX1800升级支持了Mesh技术,拥有两台以上AX1800的用户可以将它们进行Mesh组网,做到全屋信号无缝覆盖,走到哪都能享受高速Wi-Fi ...
最新文章
- Android/Java 中线程(Thread)的使用
- OpenCV | OpenCV哈里斯 (Harris)角点检测
- 密码界“女杀手”,破译世上最安全密码系统,获 771 万奖金!
- java中日期怎么比较_如何比较Java中的日期?
- 自编码器参数是否需要相称呢
- android 获取当前画布,Android硬件位图填坑之获取硬件画布
- go语言mysql操作_使用Go语言操作MySQL数据库的思路与步骤
- date日期 和 date时间拼接_函数周期表丨时间丨值丨DATE
- 单片机c语言不能编译,用keil4编译C语言代码,编译通过,但是链接时无法产生.hex文件。...
- NUC1742 Subsequence【前缀和+二分搜索+尺取法】
- keyphrase抽取论文在聊什么?
- html文档元素两部分,html元素
- linux、mysql、nginx、tomcat 环境下压力测试的主要调试参数
- VS2017离线安装过程及下载缓慢处理(项目打包部署)
- java实现网站的访问量_如何实现对网站页面访问量的统计(javaweb和php)
- 打开我的电脑的快捷键
- 5个超棒的自我提升App
- 游戏开发中道具一键合成思路,多级别道具合成,采用递归方法,简单高效。
- 淘宝客订单同步,关联私域授权用户,给用户返分,流程是如何串起来的
- 我当测试总监的那几年 | 程序员有话说