vuex的数据渲染与修改浅析


Posted in Vue.js onNovember 26, 2020

1.vuex是什么?

用官方的话来说“Vuex 就是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化”。而说的通俗易懂点就是”你想要在不同的组件中使用同一份数据,并且在不同的组件中都可以实时修改它并且这份数据保持同步“。

2.如何使用state中的数据

在你创建好store这个仓库之后,并且在其中添加了相应的数据以及修改它的方法,你就可以在你的组件中使用这个仓库了。比如我们的store是这样最简单的一中:

vuex的数据渲染与修改浅析

在组件中渲染store中的数据

1.通过 this.$store来访问store中的state数据,比如我们在页面中使用一个p标签,在里面渲染store中的state中的数据, <p>{{count}}</p> ,此时这个count应该如何从store中拿出来了?

2.这时我们就需要在这个组件中获取store中的数据了。我们可以直接在本组件的计算属性computed中获取

vuex的数据渲染与修改浅析

3.然后p标签中的count就会渲染出store中的count的值 0 了。

如果你觉得这样写太麻烦了,我们就可以使用vuex的辅助函数mapState

在使用这个辅助函数之前我们需要引入这个辅助函数

import {mapState } from 'vuex'

最后同样是在计算属性中使用它, ...mapState(["count"]) ,这样同样可以达到上面的效果,如果有多个数据,那就直接在这个数组后面添加就行了。列如...mapState(["count","count1",...]) ,需要哪个数据直接拿出来用就可以了

3.如何修改state中的数据

首先我们要知道,官网虽然说修改state中的数据唯一方法就是提交 mutation。但是我们也可以直接修改state中的数据,列如this.$store.state.count = 1 ,这样同样修改了数据,但是最好不要这样,因为这样虽然修改了数据,但是这样可能造成一些问题,因为这样vuex监听不到你的修改过程。

言归正传,如何提交mutation了?

1.创建一个方法来提交mutation,比如最简单的点击事件触发某个方法,然后这个方法来提交mutation。 <button @click="Add()">+++</button>,当点击这个按钮时就回触发Add方法,而在Add方法中我们来提交mutation。

在vuex中提交mutation的方式就是使用this.$store.commit()方法,这个方法的参数就是你在store中的mutations中所写的你需要调用的方法。例如上图我们在mutations中创建的add方法,让count自增,所以完整的写法就是在Add方法中:this.$store.commit('add') , 这样当你点击按钮触发组件中的Add方法,这个方法中在通过this.$store.commit('add')方法来修改store中的数据。

如果你觉得这样也麻烦,同样有辅助函数来帮助你,还是一样,先引入这个辅助函数

import { mapMutations} from 'vuex'

然后在本组件的methods中调用它

...mapMutations(['add']), ,然后在按钮点击的时候直接触发add方法就好了,不需要在去触发Add方法了,例如: <button @click="add()">+++</button> ,这样也可以修改vuex中的数据。

总结

到此这篇关于vuex数据渲染与修改的文章就介绍到这了,更多相关vuex数据渲染与修改内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
浅析VUE防抖与节流
Nov 24 Vue.js
vue组件中节流函数的失效的原因和解决方法
Dec 02 Vue.js
vue 实现click同时传入事件对象和自定义参数
Jan 29 Vue.js
Vue项目打包部署到apache服务器的方法步骤
Feb 01 Vue.js
深入理解Vue的数据响应式
May 15 Vue.js
解决Vue+SpringBoot+Shiro跨域问题
Jun 09 Vue.js
Vue3.0中Ref与Reactive的区别示例详析
Jul 07 Vue.js
vue-cil之axios的二次封装与proxy反向代理使用说明
Apr 07 Vue.js
vue实现书本翻页动画效果实例详解
Apr 08 Vue.js
三种方式清除vue路由跳转router-link的历史记录
Apr 10 Vue.js
VUE递归树形实现多级列表
Jul 15 Vue.js
vue实现input输入模糊查询的三种方式
Aug 14 Vue.js
vue动态合并单元格并添加小计合计功能示例
Nov 26 #Vue.js
vue单元格多列合并的实现
Nov 26 #Vue.js
VUE项目实现主题切换的多种方法
Nov 26 #Vue.js
Vue项目如何引入bootstrap、elementUI、echarts
Nov 26 #Vue.js
vue实现广告栏上下滚动效果
Nov 26 #Vue.js
Vue组件生命周期运行原理解析
Nov 25 #Vue.js
vue element-ul实现展开和收起功能的实例代码
Nov 25 #Vue.js
You might like
使用字符串函数输出整数化的PHP版本号
2006/10/09 PHP
PHP文件打开、关闭、写入的判断与执行代码
2011/05/24 PHP
php中base_convert()进制数字转换函数实例
2014/11/20 PHP
php判断文件上传类型及过滤不安全数据的方法
2014/12/17 PHP
原始XMLHttpRequest方法详情回顾
2013/11/28 Javascript
js格式化时间和js格式化时间戳示例
2014/02/10 Javascript
同一个网页中实现多个JavaScript特效的方法
2015/02/02 Javascript
使用Browserify配合jQuery进行编程的超级指南
2015/07/28 Javascript
Bootstrap框架的学习教程详解(二)
2016/10/18 Javascript
nodejs连接mysql数据库简单封装示例-mysql模块
2017/04/10 NodeJs
Layui表格监听行单双击事件讲解
2019/11/14 Javascript
使用Typescript开发微信小程序的步骤详解
2021/01/12 Javascript
[36:45]TNC vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python定时器使用示例分享
2014/02/16 Python
Python中转换角度为弧度的radians()方法
2015/05/18 Python
python实现在字符串中查找子字符串的方法
2015/07/11 Python
python实现将内容分行输出
2015/11/05 Python
python实现对excel进行数据剔除操作实例
2017/12/07 Python
python编写Logistic逻辑回归
2020/12/30 Python
python如何实现一个刷网页小程序
2018/11/27 Python
Python3.5装饰器典型案例分析
2019/04/30 Python
聊聊python里如何用Borg pattern实现的单例模式
2019/06/06 Python
python 寻找离散序列极值点的方法
2019/07/10 Python
python map比for循环快在哪
2020/09/21 Python
Russell Stover巧克力官方网站:美国领先的精美巧克力制造商
2016/11/27 全球购物
香港最大的洋酒零售连锁店:屈臣氏酒窖(Watson’s Wine)
2018/12/10 全球购物
美国沃尔玛网上超市:Walmart
2020/08/14 全球购物
数据库的约束含义
2012/09/09 面试题
音乐学院硕士生的自我评价分享
2013/11/01 职场文书
高中生学习的自我评价
2013/12/14 职场文书
应届硕士毕业生自荐信
2014/05/26 职场文书
我爱幼儿园演讲稿
2014/09/11 职场文书
党的群众路线教育实践活动对照检查材料(四风)
2014/09/27 职场文书
地方课程教学计划
2015/01/19 职场文书
2015年电信员工工作总结
2015/05/26 职场文书
Python 恐龙跑跑小游戏实现流程
2022/02/15 Python