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 相关文章推荐
yepnope.js 异步加载资源文件
Sep 08 Javascript
动态加载JS文件的三种方法
Nov 08 Javascript
基于jQuery实现的QQ表情插件
Aug 25 Javascript
JavaScript简单下拉菜单实例代码
Sep 07 Javascript
Angularjs 制作购物车功能实例代码
Sep 14 Javascript
原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)
Oct 29 Javascript
Move.js入门
Feb 08 Javascript
微信小程序中input标签详解及简单实例
May 18 Javascript
基于jquery实现左右上下移动效果
May 02 jQuery
微信小程序 弹窗输入组件的实现解析
Aug 12 Javascript
JavaScript单线程和任务队列原理解析
Feb 04 Javascript
使用javascript解析二维码的三种方式
Nov 11 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
thinkphp模板赋值与替换实例简述
2014/11/24 PHP
浅谈PHP中其他类型转化为Bool类型
2016/03/28 PHP
Thinkphp 中 distinct 的用法解析
2016/12/14 PHP
Laravel实现ApiToken认证请求
2019/10/14 PHP
javascript判断单选框或复选框是否选中方法集锦
2007/04/04 Javascript
js 设置选中行的样式的实现代码
2010/05/24 Javascript
基于jQuery的简单九宫格实现代码
2012/08/09 Javascript
js自执行函数的几种不同写法的比较
2012/08/16 Javascript
jquery 使用简明教程
2014/03/05 Javascript
深入理解javascript中的 “this”
2017/01/17 Javascript
Web前端框架Angular4.0.0 正式版发布
2017/03/28 Javascript
小程序日历控件使用方法详解
2018/12/29 Javascript
Vue.js递归组件实现组织架构树和选人功能案例分析
2019/07/03 Javascript
vue项目打包后提交到git上为什么没有dist这个文件的解决方法
2020/09/16 Javascript
JS时间戳与日期格式互相转换的简单方法示例
2021/01/30 Javascript
[02:04]2020年夜魇暗潮预告片
2020/10/30 DOTA
Python通过解析网页实现看报程序的方法
2014/08/04 Python
Python中对象迭代与反迭代的技巧总结
2016/09/17 Python
Python学习笔记之变量、自定义函数用法示例
2019/05/28 Python
对PyQt5中的菜单栏和工具栏实例详解
2019/06/20 Python
python变量的存储原理详解
2019/07/10 Python
Matplotlib使用字符串代替变量绘制散点图的方法
2020/02/17 Python
3种适用于Python的疯狂秘密武器及原因解析
2020/04/29 Python
详解Python直接赋值,深拷贝和浅拷贝
2020/07/09 Python
Python 利用flask搭建一个共享服务器的步骤
2020/12/05 Python
美国著名手表网站:Timepiece
2017/11/15 全球购物
你所知道的集合类都有哪些?主要方法?
2012/12/31 面试题
项目资料员岗位职责
2013/12/10 职场文书
2014年小学植树节活动方案
2014/03/02 职场文书
师范生免费教育协议书范本
2014/10/09 职场文书
银行客户经理岗位职责
2015/04/09 职场文书
欠款起诉书范文
2015/05/19 职场文书
宣传委员竞选稿
2015/11/19 职场文书
Python Pandas知识点之缺失值处理详解
2021/05/11 Python
分析SQL窗口函数之聚合窗口函数
2022/04/21 Oracle
解决vue自定义组件@click点击失效问题
2022/04/30 Vue.js