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 相关文章推荐
改进:论坛UBB代码自动插入方式
Dec 22 Javascript
jquery 学习之一 对象访问
Nov 23 Javascript
使用 Node.js 做 Function Test实现方法
Oct 25 Javascript
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
Aug 11 Javascript
4种JavaScript实现简单tab选项卡切换的方法
Jan 06 Javascript
用JS生成UUID的方法实例
Mar 30 Javascript
关于Vue.nextTick()的正确使用方法浅析
Aug 25 Javascript
微信小程序简单实现form表单获取输入数据功能示例
Nov 30 Javascript
vue.js的computed,filter,get,set的用法及区别详解
Mar 08 Javascript
vue更改数组中的值实例代码详解
Feb 07 Javascript
深入了解Vue3模板编译原理
Nov 19 Vue.js
原生JS实现音乐播放器的示例代码
Feb 25 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
检查url链接是否已经有参数的php代码 添加 ? 或 &
2010/02/09 PHP
PHP实现Javascript中的escape及unescape函数代码分享
2015/02/10 PHP
php数组添加与删除单元的常用函数实例分析
2015/02/16 PHP
PHP的Json中文处理解决方案
2016/09/29 PHP
php实现用户注册密码的crypt加密
2017/06/08 PHP
Yii2语言国际化的配置教程
2018/08/19 PHP
js确定对象类型方法
2012/03/30 Javascript
jquery不会自动回收xmlHttpRequest对象 导致了内存溢出
2012/06/18 Javascript
javascript对中文按照拼音排序代码
2014/08/20 Javascript
基于Javascript实现弹出页面效果
2016/01/01 Javascript
Javascript获取随机数的实现方法
2016/06/22 Javascript
js实现上传图片预览方法
2016/10/25 Javascript
微信小程序 wxapp画布 canvas详细介绍
2016/10/31 Javascript
浅谈jQuery hover(over, out)事件函数
2016/12/03 Javascript
Vue.js基础知识小结
2017/01/13 Javascript
input框中自动展示当前日期yyyy/mm/dd的实现方法
2017/07/06 Javascript
vue实现点击关注后及时更新列表功能
2018/06/26 Javascript
jQuery HTML css()方法与css类实例详解
2020/05/20 jQuery
JavaScript实现点击自制菜单效果
2021/02/02 Javascript
[46:00]Ti4 冒泡赛第二轮LGD vs C9 2
2014/07/14 DOTA
Python使用回溯法子集树模板解决迷宫问题示例
2017/09/01 Python
浅谈django三种缓存模式的使用及注意点
2018/09/30 Python
python 实现将list转成字符串,中间用空格隔开
2019/12/25 Python
简单了解Django项目应用创建过程
2020/07/06 Python
15个应该掌握的Jupyter Notebook使用技巧(小结)
2020/09/23 Python
.net面试题
2016/09/17 面试题
普通话宣传标语
2014/06/26 职场文书
革命英雄事迹演讲稿
2014/09/13 职场文书
教师个人总结范文
2015/02/11 职场文书
2015年控辍保学工作总结
2015/05/18 职场文书
毕业班工作总结
2015/08/10 职场文书
调解协议书范本
2016/03/21 职场文书
商业计划书如何写?关键问题有哪些?
2019/07/11 职场文书
导游词书写之黄山
2019/08/06 职场文书
如何用JavaScript检测当前浏览器是无头浏览器
2021/04/27 Javascript
Redisson实现Redis分布式锁的几种方式
2021/08/07 Redis