一篇看懂vuejs的状态管理神器 vuex状态管理模式


Posted in Javascript onApril 20, 2017

关于vuex类的新闻最近很多,看到眼热就去查了下资料,然后扯出来一堆flux、redux、state、state之类的概念,以及大型工程必要性之类的。看官方手册也是昏昏然。

然而,我还是弄懂了!我准备从demo出发,以同样的一个最简单的demo,演示两种情况下的代码编写情况:

  • 单纯依赖于vue.js
  • 依赖vue.js,也使用了vuex技术

目的是通过对比引出vuex的概念、优势和劣势。也许这是目前最接地气的vuex的介绍吧:)。所以无论如何在了解vuex之前,你必须懂得vue.js(好像废话:)。现在开始。

假设一个微小的应用,有一个标签显示数字,两个按钮分别做数字的加一和减一的操作。用户界面看起来是这样的:

一篇看懂vuejs的状态管理神器 vuex状态管理模式

使用vue的话,就是这样:

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
 <p>{{count}}
 <button @click="inc">+</button>
 <button @click="dec">-</button>
 </p>
</div>
<script>
new Vue({
 el:'#app',
 data () {
 return {
  count: 0
 }
 },
 methods: {
 inc () {
  this.count++
 },
 dec () {
  this.count--
 }
 }
})
</script>

我写的代码代码可以直接拷贝到你的html内并且打开执行,你可以不费多余的劲儿,就把应用跑起来,按按按钮,看看界面上的反应是否如你预期。

整个代码结构非常清晰,代码是代码,数据是数据,这也是我一直以来非常喜欢vue.js的重要原因。代码就是放在methods数组内的两个函数inc、dec,被指令@click关联到button上。而data内返回一个属性count,此属性通过{{count}}绑定到标签p内。

现在来看看,同样的demo app,使用vuex完成的代码的样子,再一次,如下代码不是代码片段,是可以贴入到你的html文件内,并且直接使用浏览器打开运行的。

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuex@next"></script>
<div id="app">
 <p>{{count}}
 <button @click="inc">+</button>
 <button @click="dec">-</button>
 </p>
</div>
<script>

const store = new Vuex.Store({
 state: {
 count: 0
 },
 mutations: {
  inc: state => state.count++,
 dec: state => state.count--
 }
})

const app = new Vue({
 el: '#app',
 computed: {
 count () {
  return store.state.count
 }
 },
 methods: {
 inc () {
  store.commit('inc')
 },
 dec () {
  store.commit('dec')
 }
 }
})
</script>

我们先看到有哪些重要的变化:

  • 新的代码添加了对vuex@next脚本的依赖。这是当然的,因为你需要使用vuex的技术,当然需要引用它
  • methods数组还是这两个方法,这和demo1是一样的;但是方法内的计算逻辑,不再是在函数内进行,而是提交给store对象!这是一个新的对象!
  • count数据也不再是一个data函数返回的对象的属性;而是通过计算字段来返回,并且在计算字段内的代码也不是自己算的,而是转发给store对象。再一次store对象!

就是说,之前在vue实例内做的操作和数据的计算现在都不再自己做了,而是交由对象store来做了。这突然让我想到就先餐厅现在都不在洗碗了,都交给政府认证的机构来洗了。

说回正题。store对象是Vuex.Store的实例。在store内有分为state对象和mutations对象,其中的state放置状态,mutations则是一个会引发状态改变的所有方法。正如我们看到的,目前的state对象,其中的状态就只有一个count。而mutations有两个成员,它们参数为state,在函数体内对state内的count成员做加1和减1的操作。

活还是那些活,现在引入了一个store对象,把数据更新的活给揽过去,不再需要vue实例自己计算了,代价是引入了新的概念和层次。那么好处是什么(一个土耳其古老的发问)?

vuex解决了组件之间共享同一状态的麻烦问题。当我们的应用遇到多个组件共享状态时,会需要:

  • 多个组件依赖于同一状态。传参的方法对于多层嵌套的组件将会非常繁琐,并且对于兄弟组件间的状态传递无能为力。这需要你去学习下,vue编码中多个组件之间的通讯的做法。
  • 来自不同组件的行为需要变更同一状态。我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。

以上的这些模式非常脆弱,通常会导致无法维护的代码。来自官网的一句话:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态。这里的关键在于集中式存储管理。这意味着本来需要共享状态的更新是需要组件之间通讯的,而现在有了vuex,就组件就都和store通讯了。问题就自然解决了。

这就是为什么官网再次会提到Vuex构建大型应用的价值。如果您不打算开发大型单页应用,使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单,您最好不要使用 Vuex。

关于

作者:刘传君

创建过产品,创过业。好读书,求甚解。 可以通过 1000copy#gmail.com 联系到我

出品

bootstrap小书 https://www.gitbook.com/book/1000copy/bootstrap/details
http小书 http://www.ituring.com.cn/book/1791
Git小书 http://www.ituring.com.cn/book/1870

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
原创javascript小游戏实现代码
Aug 19 Javascript
JavaScript中的关键字&quot;VAR&quot;使用详解 分享
Jul 31 Javascript
js操作iframe父子窗体示例
May 22 Javascript
JavaScript常用脚本汇总(一)
Mar 04 Javascript
js网页滚动条滚动事件实例分析
May 05 Javascript
js入门之Function函数的使用方法【新手必看】
Nov 22 Javascript
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
JavaScript实现二叉树的先序、中序及后序遍历方法详解
Oct 26 Javascript
JavaScript中的高级函数
Jan 04 Javascript
详解基于vue-cli配置移动端自适应
Jan 13 Javascript
详解Node 定时器
Feb 26 Javascript
插件导致ECharts被全量引入的坑示例解析
Sep 23 Javascript
addEventListener()与removeEventListener()解析
Apr 20 #Javascript
详解用vue-cli来搭建vue项目和webpack
Apr 20 #Javascript
js禁止浏览器的回退事件
Apr 20 #Javascript
vue-cli入门之项目结构分析
Apr 20 #Javascript
JS+HTML5实现上传图片预览效果完整实例【测试可用】
Apr 20 #Javascript
详解Vue使用 vue-cli 搭建项目
Apr 20 #Javascript
解决AngualrJS页面刷新导致异常显示问题
Apr 20 #Javascript
You might like
基于mysql的论坛(5)
2006/10/09 PHP
PHP学习之数组值的操作
2011/04/17 PHP
PHP设计模式之适配器模式定义与用法详解
2018/04/03 PHP
laravel csrf排除路由,禁止,关闭指定路由的例子
2019/10/21 PHP
javascript编程起步(第四课)
2007/02/27 Javascript
JavaScript入门教程(2) JS基础知识
2009/01/31 Javascript
JS弹出对话框返回值代码(asp.net后台)
2010/12/28 Javascript
Javascript 按位与运算符 (&amp;)使用介绍
2014/02/04 Javascript
用js将内容复制到剪贴板兼容浏览器
2014/03/18 Javascript
node.js中的fs.fchmod方法使用说明
2014/12/16 Javascript
js学使用setTimeout实现轮循动画
2017/07/17 Javascript
js实现本地时间同步功能
2017/08/26 Javascript
JavaScript for循环 if判断语句(学习笔记)
2017/10/11 Javascript
AngularJs分页插件使用详解
2018/06/30 Javascript
用jQuery将JavaScript对象转换为querystring查询字符串的方法
2018/11/12 jQuery
Vue使用.sync 实现父子组件的双向绑定数据问题
2019/04/04 Javascript
three.js着色器材质的内置变量示例详解
2020/08/16 Javascript
Javascript实现单选框效果
2020/12/09 Javascript
使用Python的PEAK来适配协议的教程
2015/04/14 Python
Python文件的读写和异常代码示例
2017/10/31 Python
详细分析python3的reduce函数
2017/12/05 Python
vscode 配置 python3开发环境的方法
2019/09/19 Python
Django ORM判断查询结果是否为空,判断django中的orm为空实例
2020/07/09 Python
Grid 宫格常用布局的实现
2020/01/10 HTML / CSS
美国最大的宠物用品零售商:PetSmart
2016/11/14 全球购物
白宫黑市官网:White House Black Market
2016/11/17 全球购物
香港莎莎官网Sasa.com:亚洲著名国际化妆品商城
2019/11/10 全球购物
PHP面试题大全
2015/10/16 面试题
什么是方法的重载
2013/06/24 面试题
水产养殖学应届生求职信
2013/09/29 职场文书
小学校园广播稿(3篇)
2014/09/19 职场文书
通知范文怎么写
2015/04/16 职场文书
Canvas跟随鼠标炫彩小球的实现
2021/04/11 Javascript
python绘图subplots函数使用模板的示例代码
2021/04/30 Python
浅谈Python从全局与局部变量到装饰器的相关知识
2021/06/21 Python
德生BCL3000抢先使用感受和评价
2022/04/07 无线电