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 相关文章推荐
onclick与listeners的执行先后问题详细解剖
Jan 07 Javascript
javascript eval(func())使用示例
Dec 05 Javascript
javascript实现在指定元素中垂直水平居中
Sep 13 Javascript
javascript中加var和不加var的区别 你真的懂吗
Jan 06 Javascript
第六篇Bootstrap表格样式介绍
Jun 21 Javascript
Jquery调用iframe父页面中的元素及方法
Aug 23 Javascript
Vue.JS入门教程之处理表单
Dec 01 Javascript
神级程序员JavaScript300行代码搞定汉字转拼音
May 20 Javascript
JS请求servlet功能示例
Jun 01 Javascript
详解性能更优越的小程序图片懒加载方式
Jul 18 Javascript
bootstrap动态调用select下拉框的实例代码
Aug 09 Javascript
js防抖和节流的深入讲解
Dec 06 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类的使用 实例代码讲解
2009/12/28 PHP
PHP实现生成透明背景的PNG缩略图函数分享
2014/07/08 PHP
Symfony2学习笔记之系统路由详解
2016/03/17 PHP
js下获取div中的数据的原理分析
2010/04/07 Javascript
jquery如何获取复选框的值
2013/12/12 Javascript
jquery设置按钮停顿3秒不可用
2014/03/07 Javascript
jQuery入门介绍之基础知识
2015/01/13 Javascript
使用Meteor配合Node.js编写实时聊天应用的范例
2015/06/23 Javascript
javascript如何操作HTML下拉列表标签
2015/08/20 Javascript
JavaScript实现的MD5算法完整实例
2016/02/02 Javascript
Hammer.js+轮播原理实现简洁的滑屏功能
2016/02/02 Javascript
浅谈js对象的创建和对6种继承模式的理解和遐想
2016/10/16 Javascript
利用vue-router实现二级菜单内容转换
2016/11/30 Javascript
浅析Jquery操作select
2016/12/13 Javascript
JS原生轮播图的简单实现(推荐)
2017/07/22 Javascript
Vue v2.5 调整和更新不完全问题
2017/10/24 Javascript
详解如何在微信小程序开发中正确的使用vant ui组件
2018/09/13 Javascript
JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转
2019/11/25 Javascript
python操作MySQL 模拟简单银行转账操作
2017/09/27 Python
Python实现动态图解析、合成与倒放
2018/01/18 Python
python读取Kafka实例
2019/12/23 Python
Python实现子类调用父类的初始化实例
2020/03/12 Python
TensorFlow中如何确定张量的形状实例
2020/06/23 Python
python获取百度热榜链接的实例方法
2020/08/25 Python
python中time、datetime模块的使用
2020/12/14 Python
Python Selenium库的基本使用教程
2021/01/04 Python
纯css3(无图片/js)制作的几个社交媒体网站的图标
2013/03/21 HTML / CSS
护理职业生涯规划书
2014/01/24 职场文书
团代会宣传工作方案
2014/05/08 职场文书
乡镇精神文明建设汇报材料
2014/08/15 职场文书
大专生自我鉴定怎么写
2014/09/16 职场文书
党政领导班子民主生活会整改措施
2014/09/18 职场文书
涨工资申请书应该怎么写?
2019/07/08 职场文书
高效笔记技巧分享:学会这些让你不再困扰
2019/09/04 职场文书
python 自动化偷懒的四个实用操作
2021/04/11 Python
html输入两个数实现加减乘除功能
2021/07/01 HTML / CSS