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 相关文章推荐
如何在标题栏显示框架内页面的标题
Feb 03 Javascript
点击隐藏页面左栏或右栏实现js代码
Apr 01 Javascript
js格式化货币数据实现代码
Sep 04 Javascript
javascript带回调函数的异步脚本载入方法实例分析
Jul 02 Javascript
针对后台列表table拖拽比较实用的jquery拖动排序
Oct 10 Javascript
js实现倒计时效果(小于10补零)
Mar 08 Javascript
微信小程序 按钮滑动的实现方法
Sep 27 Javascript
vue2.0 子组件改变props值,并向父组件传值的方法
Mar 01 Javascript
Vue+ElementUI实现表单动态渲染、可视化配置的方法
Mar 07 Javascript
三种Webpack打包方式(小结)
Sep 19 Javascript
微信小程序iBeacon测距及稳定程序的实现解析
Jul 31 Javascript
SpringBoot+Vue 前后端合并部署的配置方法
Dec 30 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+mysql开源XNA 聚合程序发布 下载
2007/07/13 PHP
供参考的 php 学习提高路线分享
2011/10/23 PHP
php循环语句 for()与foreach()用法区别介绍
2012/09/05 PHP
php empty()与isset()区别的详细介绍
2013/06/17 PHP
php计算指定目录下文件占用空间的方法
2015/03/13 PHP
PHP文件系统管理(实例讲解)
2017/09/19 PHP
PHP数组遍历的几种常见方式总结
2019/02/15 PHP
javascript 密码强弱度检测万能插件
2009/02/25 Javascript
setInterval计时器不准的问题解决方法
2014/05/08 Javascript
javascript实现当前页导航激活的方法
2015/02/27 Javascript
jQuery实现点击小图显示大图代码分享
2015/08/25 Javascript
JS判断当前页面是否在微信浏览器打开的方法
2015/12/08 Javascript
jQuery添加和删除指定标签的方法
2015/12/16 Javascript
AngularJS 过滤器(自带和自建)详解
2016/09/19 Javascript
JavaScript定时器实现的原理分析
2016/12/06 Javascript
基于JavaScript实现本地图片预览
2017/02/08 Javascript
vue.js中Vue-router 2.0基础实践教程
2017/05/08 Javascript
分析JavaScript数组操作难点
2017/12/18 Javascript
Angular ElementRef简介及其使用
2018/10/01 Javascript
利用layer实现表单完美验证的方法
2019/09/26 Javascript
[01:57]2018年度DOTA2最具潜力解说-完美盛典
2018/12/16 DOTA
python实现监控windows服务并自动启动服务示例
2014/04/17 Python
Python实现的简单hangman游戏实例
2015/06/28 Python
Python中django学习心得
2017/12/06 Python
python pyqtgraph 保存图片到本地的实例
2020/03/14 Python
利用Vscode进行Python开发环境配置的步骤
2020/06/22 Python
阿里云:Aliyun.com
2017/02/15 全球购物
荷兰超市:DEEN
2018/03/14 全球购物
最好的商品表达自己:Cafepress
2019/09/04 全球购物
Linux操作面试题
2012/05/16 面试题
建筑专业自荐信
2013/10/18 职场文书
对教师的评语
2014/04/28 职场文书
医师定期考核实施方案
2014/05/07 职场文书
工伤事故证明
2014/10/20 职场文书
2016年大学生社区服务活动总结
2016/04/06 职场文书
高一作文之乐趣
2019/11/21 职场文书