一篇看懂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 图片上一张下一张链接效果代码
Mar 12 Javascript
CSS和JS标签style属性对照表(方便js开发的朋友)
Nov 11 Javascript
javascript学习笔记(八) js内置对象
Jun 19 Javascript
无缝滚动js代码通俗易懂(自写)
Jun 19 Javascript
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
Aug 28 Javascript
jQuery实现鼠标经过图片变亮其他变暗效果
May 08 Javascript
jQuery遍历DOM节点操作之filter()方法详解
Apr 14 Javascript
全面了解JS中的匿名函数
Jun 29 Javascript
node.js实现登录注册页面
Apr 08 Javascript
jQuery 表单序列化实例代码
Jun 11 jQuery
jQuery实现腾讯信用界面(自制刻度尺)样式
Aug 15 jQuery
Vue中key的作用示例代码详解
Jun 10 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
php源码加密 仿微盾PHP加密专家(PHPCodeLock)
2010/05/06 PHP
php使用sql数据库 获取字段问题介绍
2013/08/12 PHP
Codeigniter实现处理用户登录验证后的URL跳转
2014/06/12 PHP
PHP类和对象相关系统函数与运算符小结
2016/09/28 PHP
PHP类与对象后期静态绑定操作实例详解
2018/12/20 PHP
Yii 框架使用Forms操作详解
2020/05/18 PHP
javascript中&quot;/&quot;运算符常见错误
2010/10/13 Javascript
JavaScript转换二进制编码为ASCII码的方法
2015/04/16 Javascript
JavaScript中通过提示框跳转页面的方法
2016/02/14 Javascript
深入理解jQuery之防止冒泡事件
2016/05/24 Javascript
Vue.js实现拖放效果的实例
2016/09/30 Javascript
js利用for in循环获取 一个对象的所有属性以及值的实例
2017/03/30 Javascript
jQuery tip提示插件(实例分享)
2017/04/28 jQuery
使用store来优化React组件的方法
2017/10/23 Javascript
详解使用vue-admin-template的优化历程
2018/05/20 Javascript
Vue 递归多级菜单的实例代码
2019/05/05 Javascript
Vue组件为什么data必须是一个函数
2020/06/11 Javascript
使用Python编写vim插件的简单示例
2015/04/17 Python
python将字符串转换成数组的方法
2015/04/29 Python
使用Python脚本将Bing的每日图片作为桌面的教程
2015/05/04 Python
Python计算已经过去多少个周末的方法
2015/07/25 Python
如何处理Python3.4 使用pymssql 乱码问题
2016/01/08 Python
Python md5与sha1加密算法用法分析
2017/07/14 Python
python设置值及NaN值处理方法
2018/07/03 Python
详解python中__name__的意义以及作用
2019/08/07 Python
Python判断字符串是否xx开始或结尾的示例
2019/08/08 Python
Python学习笔记之列表和成员运算符及列表相关方法详解
2019/08/22 Python
浅谈keras.callbacks设置模型保存策略
2020/06/18 Python
纯css3实现的鼠标悬停动画按钮
2014/12/23 HTML / CSS
使用CSS3编写类似iOS中的复选框及带开关的按钮
2016/04/11 HTML / CSS
La Senza官网:北美顶尖性感内衣品牌
2018/08/03 全球购物
2014三八妇女节活动总结
2014/03/01 职场文书
会计演讲稿范文
2014/05/23 职场文书
试用期自我评价怎么写
2015/03/10 职场文书
交通事故调解协议书
2015/05/20 职场文书
Mysql实现简易版搜索引擎的示例代码
2021/08/30 MySQL