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 相关文章推荐
新浪刚打开页面出来的全屏广告代码
Apr 02 Javascript
getElementByIdx_x js自定义getElementById函数
Jan 24 Javascript
JS的事件绑定深入认识
Jun 26 Javascript
基于zepto.js简单实现上传图片
Jun 21 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
Jul 09 Javascript
Vuejs 组件——props数据传递的实例代码
Mar 07 Javascript
详解Vue + Vuex 如何使用 vm.$nextTick
Nov 20 Javascript
Vue.set()动态的新增与修改数据,触发视图更新的方法
Sep 15 Javascript
angularjs手动识别字符串中的换行符方法
Oct 02 Javascript
基于iview的router常用控制方式
May 30 Javascript
小程序根据手机机型设置自定义底部导航距离
Jun 04 Javascript
JavaScript设计模式--简单工厂模式实例分析【XHR工厂案例】
May 23 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
PHP5 操作MySQL数据库基础代码
2009/09/29 PHP
Laravel 5框架学习之Eloquent 关系
2015/04/09 PHP
基于PHP生成简单的验证码
2016/06/01 PHP
header与缓冲区之间的深层次分析
2016/07/30 PHP
jquery 与NVelocity 产生冲突的解决方法
2011/06/13 Javascript
热点新闻滚动特效的js代码
2013/08/17 Javascript
javascript禁用键盘功能键让右击及其他键无效
2013/10/09 Javascript
使用js完成节点的增删改复制等的操作
2014/01/02 Javascript
javascript数组操作(创建、元素删除、数组的拷贝)
2014/04/07 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
js实现div层缓慢收缩与展开的方法
2015/05/11 Javascript
JS实现网页右侧带动画效果的伸缩窗口代码
2015/10/29 Javascript
Bootstrap 粘页脚效果
2016/03/28 Javascript
jquery中实现时间戳与日期相互转换
2016/04/12 Javascript
JS获取屏幕高度的简单实现代码
2016/05/24 Javascript
jQuery layui常用方法介绍
2016/07/25 Javascript
详解angularjs利用ui-route异步加载组件
2017/05/21 Javascript
form表单数据封装成json格式并提交给服务器的实现方法
2017/12/14 Javascript
js实现图片局部放大效果详解
2019/03/18 Javascript
微信小程序嵌入腾讯视频源过程详解
2019/08/08 Javascript
微信小程序实现电子签名并导出图片
2020/05/27 Javascript
JavaScript中EventBus实现对象之间通信
2020/10/18 Javascript
[01:01:31]2018DOTA2亚洲邀请赛3月29日小组赛B组 Mineski VS paiN
2018/03/30 DOTA
python解析xml模块封装代码
2014/02/07 Python
Python numpy实现数组合并实例(vstack,hstack)
2018/01/09 Python
Python中的枚举类型示例介绍
2019/01/09 Python
pytorch中如何使用DataLoader对数据集进行批处理的方法
2019/08/06 Python
Python使用pyyaml模块处理yaml数据
2020/04/14 Python
如何在VSCode下使用Jupyter的教程详解
2020/07/13 Python
使用CSS变量实现炫酷惊人的悬浮效果
2019/04/26 HTML / CSS
奥地利体育网上商店:Gigasport
2019/10/09 全球购物
2016年11月份红领巾广播稿
2015/12/21 职场文书
导游词之铁岭象牙山
2019/12/06 职场文书
使用 Apache 反向代理的设置技巧
2022/01/18 Servers
Python 中面向接口编程
2022/05/20 Python
python+opencv实现目标跟踪过程
2022/06/21 Python