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 19 Vue.js
vue基于Echarts的拖拽数据可视化功能实现
Dec 04 Vue.js
Vue 实现一个简单的鼠标拖拽滚动效果插件
Dec 10 Vue.js
8个非常实用的Vue自定义指令
Dec 15 Vue.js
利用Vue实现简易播放器的完整代码
Dec 30 Vue.js
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
Mar 01 Vue.js
Vue项目中如何封装axios(统一管理http请求)
May 02 Vue.js
Vue全家桶入门基础教程
May 14 Vue.js
HTML+VUE分页实现炫酷物联网大屏功能
May 27 Vue.js
idea编译器vue缩进报错问题场景分析
Jul 04 Vue.js
vue中的可拖拽宽度div的实现示例
Apr 08 Vue.js
vue中data里面的数据相互使用方式
Jun 05 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
农民和部队如何穿矿
2020/03/04 星际争霸
珊瑚虫IP库浅析
2007/02/15 PHP
深入分析php中接口与抽象类的区别
2013/06/08 PHP
PHP PDOStatement::execute讲解
2019/01/31 PHP
Windows Live的@live.com域名注册漏洞 利用代码
2006/12/27 Javascript
js 判断checkbox是否选中的实现代码
2010/11/23 Javascript
js弹出层永远居中实现思路及代码
2013/11/29 Javascript
判断文档离浏览器顶部的距离的方法
2014/01/08 Javascript
js中自定义方法实现停留几秒sleep
2014/07/11 Javascript
nodejs npm package.json中文文档
2014/09/04 NodeJs
js实现文本框选中的方法
2015/05/26 Javascript
理解AngularJs指令
2015/12/10 Javascript
详解JavaScript基于面向对象之创建对象(1)
2015/12/10 Javascript
JavaScript实现下拉菜单的显示和隐藏
2016/01/05 Javascript
JS中的作用域链
2017/03/01 Javascript
正则表达式基本语法及表单验证操作详解【基于JS】
2017/04/07 Javascript
微信小程序实现动态设置页面标题的方法【附源码下载】
2017/11/29 Javascript
JavaScript使用类似break机制中断forEach循环的方法
2018/11/13 Javascript
了解javascript中let和var及const关键字的区别
2019/05/24 Javascript
[01:00:49]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第二场 1月31日
2021/03/11 DOTA
Python if语句知识点用法总结
2018/06/10 Python
Windows 64位下python3安装nltk模块
2018/09/19 Python
django数据模型on_delete, db_constraint的使用详解
2019/12/24 Python
python中数据库like模糊查询方式
2020/03/02 Python
Python无头爬虫下载文件的实现
2020/04/02 Python
Python 程序员必须掌握的日志记录
2020/08/17 Python
CSS3轻松实现圆角效果
2017/11/09 HTML / CSS
Backcountry旗下的户外商品闪购网站:steep&cheap
2016/09/22 全球购物
英国复古和经典球衣网站:Vintage Football Shirts
2018/10/05 全球购物
《庐山的云雾》教学反思
2014/04/22 职场文书
班主任工作经验交流材料
2014/05/13 职场文书
县政府班子个人对照检查材料
2014/10/05 职场文书
司法局2014法制宣传日活动总结
2014/11/01 职场文书
2014年教研员工作总结
2014/12/23 职场文书
英文升职感谢信
2015/01/23 职场文书