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 相关文章推荐
基于JQuery框架的AJAX实例代码
Nov 03 Javascript
jquery EasyUI的formatter格式化函数代码
Jan 12 Javascript
jQuery实现返回顶部功能适合不支持js的浏览器
Aug 19 Javascript
js监听鼠标点击和键盘点击事件并自动跳转页面
Sep 24 Javascript
node.js中的http.get方法使用说明
Dec 14 Javascript
webapp框架AngularUI的demo改造之路
Dec 21 Javascript
基于jquery实现select选择框内容左右移动添加删除代码分享
Aug 25 Javascript
javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别
Nov 13 Javascript
模拟javascript中的sort排序(简单实例)
Aug 17 Javascript
js实现动态添加上传文件页面
Oct 22 Javascript
js this 绑定机制深入详解
Apr 30 Javascript
JS面向对象实现飞机大战
Aug 26 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中strtr字符串替换用法详解
2014/11/26 PHP
php批量删除cookie的简单实现方法
2015/01/26 PHP
详解PHP中cookie和session的区别及cookie和session用法小结
2016/06/12 PHP
PHP实现表单提交数据的验证处理功能【防SQL注入和XSS攻击等】
2017/07/21 PHP
Sample script that deletes a SQL Server database
2007/06/16 Javascript
js面向对象 多种创建对象方法小结
2012/05/21 Javascript
JS打开新窗口的2种方式
2013/04/18 Javascript
JavaScript结合AJAX_stream实现流式显示
2015/01/08 Javascript
JavaScript数据类型判定的总结笔记
2015/07/31 Javascript
js实现向右横向滑出的二级菜单效果
2015/08/27 Javascript
JavaScript动态设置div的样式的方法
2015/12/26 Javascript
jQuery防止重复绑定事件的解决方法
2016/05/14 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
2016/07/06 Javascript
jQuery操作json常用方法示例
2017/01/04 Javascript
浅谈js使用in和hasOwnProperty获取对象属性的区别
2017/04/27 Javascript
Vue.js实现的表格增加删除demo示例
2018/05/22 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
2019/09/20 Javascript
javascript 模块依赖管理的本质深入详解
2020/04/30 Javascript
vue基础知识--axios合并请求和slot
2020/06/04 Javascript
echarts.js 动态生成多个图表 使用vue封装组件操作
2020/07/19 Javascript
[01:37]全新的一集《真视界》——TI7总决赛
2017/09/21 DOTA
Python bsddb模块操作Berkeley DB数据库介绍
2015/04/08 Python
Python实现栈的方法
2015/05/26 Python
Python获取邮件地址的方法
2015/07/10 Python
以视频爬取实例讲解Python爬虫神器Beautiful Soup用法
2016/01/20 Python
python 出现SyntaxError: non-keyword arg after keyword arg错误解决办法
2017/02/14 Python
Python中import机制详解
2017/11/14 Python
Python实现的读取电脑硬件信息功能示例
2018/05/30 Python
Python中is和==的区别详解
2018/11/15 Python
利用Python实现原创工具的Logo与Help
2018/12/03 Python
python实现图像拼接
2020/03/05 Python
opencv中图像叠加/图像融合/按位操作的实现
2020/04/01 Python
金融专业毕业生推荐信
2013/11/26 职场文书
优秀班主任推荐材料
2014/12/17 职场文书
七年级作文之《我和我的祖国》观后感作文
2019/10/18 职场文书
聊聊Lombok中的@Builder注解使用教程
2021/11/17 Java/Android