Vue 2.X的状态管理vuex记录详解


Posted in Javascript onMarch 23, 2017

Vue 2.X的状态管理vuex记录详解

记住上述的顺序情况:想要改变state,只能通过Mutation,虽然action可以直接改变state,这样会使每个状态可以方便的跟踪和记录(用Devtools跟踪)

vue Method   --->  Actions  ---> Mutions  ---> State (作用于vue)

在Vue2.X中使用vuex的情况:

1、多个视图依赖于同一状态,  比如验证登陆情况。

2、来自不同视图的行为需要变更同一状态 ,

3、不在一个组件树(不是父子组件的关系),组件间频繁的进行数据和状态的传递,更改。 

新建一个mutation-types.js文件,这个文件里面只做了一件事,那就是记录了事件类型,对mutation有个整体的把握。 

store 中的状态是响应式的,在组件中调用 store 中的状态简单到仅需要在计算属性computed中返回即可。触发变化也仅仅是在组件的 methods 中提交 mutations。

action中的函数触发,是在vue的methods中通过   this.$store.dispatch('方法名',参数)

action内部的函数具体写法:只是起了一个承上启下的作用,真正的处理逻辑在mutation中。 

需要注意点就是:store.js里面的配置。(想把{}里面东西提出来,在App中new,屡次不成功。)

Vue 2.X的状态管理vuex记录详解

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
?牟┛途W扣了一??效果出?? target=
May 27 Javascript
fix-ie5.js扩展在IE5下不能使用的几个方法
Aug 20 Javascript
juqery 学习之三 选择器 子元素与表单
Nov 25 Javascript
jQuery对表单元素的取值和赋值操作代码
May 19 Javascript
js数组操作学习总结
Nov 04 Javascript
常见浏览器多长时间会提示“脚本运行时间过长”总结
Apr 29 Javascript
JS文字球状放大效果代码分享
Aug 19 Javascript
不能不知道的10个angularjs英文学习网站
Mar 23 Javascript
浅谈jQuery animate easing的具体使用方法(推荐)
Jun 17 Javascript
react项目如何使用iconfont的方法步骤
Mar 13 Javascript
JS数组方法slice()用法实例分析
Jan 18 Javascript
代码块高亮可复制显示js插件highlight.js+clipboard.js整合
Feb 15 Javascript
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 #jQuery
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
Mar 23 #jQuery
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
Mar 23 #jQuery
JS中SetTimeout和SetInterval使用初探
Mar 23 #Javascript
深入学习 JavaScript中的函数调用
Mar 23 #Javascript
js中toString()和String()区别详解
Mar 23 #Javascript
jQuery插件Echarts实现的渐变色柱状图
Mar 23 #jQuery
You might like
PHP实现返回JSON和XML的类分享
2015/01/28 PHP
php使用mysqli向数据库添加数据的方法
2015/03/20 PHP
PHP实现添加购物车功能
2017/03/06 PHP
PHP用PDO如何封装简单易用的DB类详解
2017/07/30 PHP
jQuery判断元素是否是隐藏的代码
2011/04/24 Javascript
jQuery布局插件UI Layout简介及使用方法
2013/04/03 Javascript
深入浅出分析javaScript中this用法
2015/05/09 Javascript
使用jquery.qrcode.min.js实现中文转化二维码
2016/03/11 Javascript
webuploader模态框ueditor显示问题解决方法
2016/12/27 Javascript
Vue中计算属性computed的示例解读
2017/07/26 Javascript
ES6知识点整理之Proxy的应用实例详解
2019/04/16 Javascript
微信小程序如何使用globalData的方法
2019/06/06 Javascript
判断“命令按钮”是否被鼠标单击详解
2019/07/31 Javascript
layerui代码控制tab选项卡,添加,关闭的实例
2019/09/04 Javascript
JQuery+drag.js上传图片并且实现图片拖曳
2020/11/18 jQuery
Vue实现图书管理案例
2021/01/20 Vue.js
Python科学画图代码分享
2017/11/29 Python
Python实现PS图像调整颜色梯度效果示例
2018/01/25 Python
python2.6.6如何升级到python2.7.14
2018/04/08 Python
Anaconda 离线安装 python 包的操作方法
2018/06/11 Python
Python 通过截图匹配原图中的位置(opencv)实例
2019/08/27 Python
python+selenium 点击单选框-radio的实现方法
2019/09/03 Python
python栈的基本定义与使用方法示例【初始化、赋值、入栈、出栈等】
2019/10/24 Python
StubHub哥伦比亚:购买和出售您的门票
2016/10/20 全球购物
美国便宜的横幅和标志印刷在线:Best of Signs
2019/05/29 全球购物
BAILEY 44官网:美国制造的女性服装
2019/07/01 全球购物
客服专员岗位职责范本
2013/11/29 职场文书
父亲八十大寿答谢词
2014/01/23 职场文书
党员公开承诺书
2014/03/25 职场文书
《槐乡五月》教学反思
2014/04/25 职场文书
学校安全教育月活动总结
2014/07/07 职场文书
2014年社区宣传工作总结
2014/12/02 职场文书
争先创优个人总结
2015/03/04 职场文书
学生会工作感言
2015/08/07 职场文书
各类场合主持词开场白范文集锦
2019/08/16 职场文书
公司财务制度:成本管理控制制度模板
2019/11/19 职场文书