一篇看懂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 相关文章推荐
使用script的src实现跨域和类似ajax效果
Nov 10 Javascript
js实现百度联盟中一款不错的图片切换效果完整实例
Mar 04 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记8)
Dec 24 Javascript
微信小程序实战之登录页面制作(5)
Mar 30 Javascript
ReactNative列表ListView的用法
Aug 02 Javascript
纯js实现画一棵树的示例
Sep 05 Javascript
Vue中的v-for指令不起效果的解决方法
Sep 27 Javascript
javascript对HTML字符转义与反转义
Dec 13 Javascript
javascript json字符串到json对象转义问题
Jan 22 Javascript
uin-app+mockjs实现本地数据模拟
Aug 26 Javascript
基于Vue+Webpack拆分路由文件实现管理
Nov 16 Javascript
vue如何清除浏览器历史栈
May 25 Vue.js
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仿盗链代码
2012/06/03 PHP
大家都应该掌握的PHP关联数组使用技巧
2015/12/25 PHP
PHP正则之正向预查与反向预查讲解与实例
2020/04/06 PHP
Javascript实例教程(19) 使用HoTMetal(2)
2006/12/23 Javascript
jQuery设置和获取HTML、文本和值示例
2014/07/08 Javascript
javascript的replace方法结合正则使用实例总结
2016/06/16 Javascript
jQuery 跨域访问解决原理案例详解
2016/07/09 Javascript
使用HTML5+Boostrap打造简单的音乐播放器
2016/08/05 Javascript
浅谈js中几种实用的跨域方法原理详解
2016/12/02 Javascript
angular forEach方法遍历源码解读
2017/01/25 Javascript
js canvas实现简单的图像扩散效果
2020/06/28 Javascript
详解easyui基于 layui.laydate日期扩展组件
2018/07/18 Javascript
JS实现滑动拼图验证功能完整示例
2020/03/29 Javascript
Python使用django搭建web开发环境
2017/06/09 Python
python2.7+selenium2实现淘宝滑块自动认证功能
2018/02/24 Python
python将一组数分成每3个一组的实例
2018/11/14 Python
python实现windows壁纸定期更换功能
2019/01/21 Python
python制作英语翻译小工具代码实例
2019/09/09 Python
opencv3/python 鼠标响应操作详解
2019/12/11 Python
在django中使用apscheduler 执行计划任务的实现方法
2020/02/11 Python
opencv+python实现均值滤波
2020/02/19 Python
python实现梯度法 python最速下降法
2020/03/24 Python
python如何操作mysql
2020/08/17 Python
如何设置PyCharm中的Python代码模版(推荐)
2020/11/20 Python
python 图像增强算法实现详解
2021/01/24 Python
HTML5+CSS设置浮动却没有动反而在中间且错行的问题
2020/05/26 HTML / CSS
Visual-Click葡萄牙:欧洲领先的在线眼镜商
2020/02/17 全球购物
什么是View State?
2013/01/27 面试题
中学自我评价
2014/01/31 职场文书
商务代表岗位职责
2015/02/15 职场文书
厉行节约工作总结
2015/08/12 职场文书
高三化学教学反思
2016/02/22 职场文书
简历上的自我评价,该怎么写呢?
2019/06/13 职场文书
2019班干部竞选演讲稿范本!
2019/07/08 职场文书
Python如何解决secure_filename对中文不支持问题
2021/07/16 Python
css布局巧妙技巧之css三角示例的运用
2022/03/16 HTML / CSS