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-tableDnD 拖拽的基本使用介绍
Jul 04 Javascript
js操作label给label赋值及取label的值示例
Nov 07 Javascript
JS获取几种URL地址的方法小结
Feb 26 Javascript
javascript十六进制数字和ASCII字符之间的转换方法
Dec 27 Javascript
AngularJs上传前预览图片的实例代码
Jan 20 Javascript
Node.JS使用Sequelize操作MySQL的示例代码
Oct 09 Javascript
vue-cli 默认路由再子路由选中下的选中状态问题及解决代码
Sep 06 Javascript
Vue项目部署在Spring Boot出现页面空白问题的解决方案
Nov 26 Javascript
BootStrap modal实现拖拽功能
Dec 01 Javascript
详解babel升级到7.X采坑总结
May 12 Javascript
JavaScript如何获取一个元素的样式信息
Jul 29 Javascript
解决Nuxt使用axios跨域问题
Jul 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
Ajax PHP 边学边练 之三 数据库
2009/11/26 PHP
在Windows下编译适用于PHP 5.2.12及5.2.13的eAccelerator.dll(附下载)
2010/05/04 PHP
Yii2创建控制器(createController)方法详解
2016/07/23 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
php+iframe 实现上传文件功能示例
2020/03/04 PHP
通过Javascript创建一个选择文件的对话框代码
2012/06/16 Javascript
jquery根据name属性查找的小例子
2013/11/21 Javascript
javascript四舍五入函数代码分享(保留后几位)
2013/12/10 Javascript
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
2014/02/12 Javascript
javascript跨浏览器的属性判断方法
2014/03/16 Javascript
jquery单行文字向上滚动效果的实现代码
2014/09/05 Javascript
JS插件overlib用法实例详解
2015/12/26 Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
2016/11/17 Javascript
浅谈MUI框架中加载外部网页或服务器数据的方法
2018/01/31 Javascript
详解AngularJS 过滤器的使用
2018/06/02 Javascript
elementUi vue el-radio 监听选中变化的实例代码
2019/06/28 Javascript
jQuery 筛选器简单操作示例
2019/10/02 jQuery
JS代码优化的8点建议
2020/02/04 Javascript
在vue中使用console.log无效的解决
2020/08/09 Javascript
Python基础语法(Python基础知识点)
2016/02/28 Python
python删除某个字符
2018/03/19 Python
Python读取数据集并消除数据中的空行方法
2018/07/12 Python
python 循环读取txt文档 并转换成csv的方法
2018/10/26 Python
python如何获取当前文件夹下所有文件名详解
2019/01/25 Python
Python udp网络程序实现发送、接收数据功能示例
2019/12/09 Python
python调用私有属性的方法总结
2020/07/24 Python
css3实现蒙版弹幕功能
2019/06/18 HTML / CSS
html5构建触屏网站之网站尺寸探讨
2013/01/07 HTML / CSS
html5 Canvas画图教程(1)—画图的基本常识
2013/01/09 HTML / CSS
国际知名设计师时装商店:Coggles
2016/09/05 全球购物
美国在线眼镜店:GlassesShop
2018/11/15 全球购物
2019年分享net面试的经历和题目
2016/08/07 面试题
房屋改造计划书
2014/01/10 职场文书
2014升学宴答谢词
2014/01/26 职场文书
五一劳动节活动记录
2014/03/23 职场文书
公共机构节能宣传周活动总结
2014/07/09 职场文书