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 相关文章推荐
非常好的js代码
Jun 27 Javascript
基于jquery的图片幻灯展示源码
Jul 15 Javascript
RequireJS使用注意细节
May 15 Javascript
jQuery Ajax 加载数据时异步显示加载动画
Aug 01 Javascript
微信小程序 教程之注册程序
Oct 17 Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
Feb 05 Javascript
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 jQuery
解决angularJS中input标签的ng-change事件无效问题
Sep 13 Javascript
js实现图片放大并跟随鼠标移动特效
Jan 18 Javascript
浅谈一个webpack构建速度优化误区
Jun 24 Javascript
基于js实现抽红包并分配代码实例
Sep 19 Javascript
vue项目支付功能代码详解
Feb 18 Vue.js
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中文汉字验证码
2007/04/08 PHP
从一个不错的留言本弄的mysql数据库操作类
2007/09/02 PHP
解析php根据ip查询所在地区(非常有用,赶集网就用到)
2013/07/01 PHP
php三元运算符知识汇总
2015/07/02 PHP
php7安装yar扩展的方法详解
2017/08/03 PHP
PHP面向对象五大原则之单一职责原则(SRP)详解
2018/04/04 PHP
JS date对象的减法处理实现代码
2010/12/28 Javascript
FireBug 调试JS入门教程 如何调试JS
2013/12/23 Javascript
js控制input输入字符解析
2013/12/27 Javascript
javaScript 页面自动加载事件详解
2014/02/10 Javascript
动态加载js、css等文件跨iframe实现
2014/02/24 Javascript
javascript判断是否按回车键并解决浏览器之间的差异
2014/05/13 Javascript
javascript 闭包详解
2015/02/15 Javascript
js获取鼠标位置实例详解
2015/12/09 Javascript
JavaScript实现经典排序算法之冒泡排序
2016/12/28 Javascript
jQuery居中元素scrollleft计算方法示例
2017/01/16 Javascript
angularjs实现table表格td单元格单击变输入框/可编辑状态示例
2019/02/21 Javascript
Vue中props的详解
2019/05/16 Javascript
layui实现多图片上传并限制上传的图片数量
2019/09/26 Javascript
[01:00:14]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第三场
2018/04/10 DOTA
[01:03:42]VP vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[54:30]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python生成验证码图片代码分享
2016/01/28 Python
Python简单实现自动删除目录下空文件夹的方法
2017/08/29 Python
朴素贝叶斯分类算法原理与Python实现与使用方法案例
2018/06/26 Python
使用keras框架cnn+ctc_loss识别不定长字符图片操作
2020/06/29 Python
python中time包实例详解
2021/02/02 Python
NFL欧洲商店(德国):NFL Europe Shop DE
2018/11/03 全球购物
个人自我评价范文
2014/02/05 职场文书
婚纱摄影师求职信
2014/03/07 职场文书
大四毕业生自荐书
2014/07/05 职场文书
四风专项整治工作情况汇报
2014/10/28 职场文书
个人租房协议书
2014/11/28 职场文书
员工加薪申请报告
2015/05/15 职场文书
基于Redis实现分布式锁的方法(lua脚本版)
2021/05/12 Redis
叶县这家生产军用电台的兵工厂,人称“四机部”,走出一上将
2022/02/18 无线电