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中computed和watch有哪些区别
Dec 19 Vue.js
vue 在服务器端直接修改请求的接口地址
Dec 19 Vue.js
Vue实现小购物车功能
Dec 21 Vue.js
vue 动态创建组件的两种方法
Dec 31 Vue.js
vue调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 Vue.js
详解vite+ts快速搭建vue3项目以及介绍相关特性
Feb 25 Vue.js
vue-cli4.5.x快速搭建项目
May 30 Vue.js
vue中 this.$set的使用详解
Nov 17 Vue.js
Element-ui Layout布局(Row和Col组件)的实现
Dec 06 Vue.js
vue判断按钮是否可以点击
Apr 09 Vue.js
vue实现在data里引入相对路径
Jun 05 Vue.js
Vue3实现简易音乐播放器组件
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
文件上传类
2006/10/09 PHP
PHP将session信息存储到数据库的类实例
2015/03/04 PHP
php保存任意网络图片到服务器的方法
2015/04/14 PHP
phpcms手机内容页面添加上一篇和下一篇
2015/06/05 PHP
JavaScript与HTML结合的基本使用方法整理
2015/10/12 PHP
PHP实现二维数组去重功能示例
2017/01/12 PHP
PHP实现的获取文件mimes类型工具类示例
2018/04/08 PHP
js中生成map对象的方法
2014/01/09 Javascript
jQuery Ajax页面局部加载方法汇总
2016/06/02 Javascript
JavaScript中点击事件的写法
2016/06/28 Javascript
JavaScript获取ul中li个数的方法
2017/02/13 Javascript
详解JavaScript调用栈、尾递归和手动优化
2017/06/03 Javascript
ES6中字符串string常用的新增方法小结
2017/11/07 Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
2018/06/20 jQuery
JavaScript内置对象math,global功能与用法实例分析
2019/06/10 Javascript
JS图片预加载三种实现方法解析
2020/05/08 Javascript
JavaScript中window和document用法详解
2020/07/28 Javascript
js+css实现扇形导航效果
2020/08/18 Javascript
Python读写Excel文件方法介绍
2014/11/22 Python
python之Socket网络编程详解
2016/09/29 Python
python下如何查询CS反恐精英的服务器信息
2017/01/17 Python
浅析python3字符串格式化format()函数的简单用法
2018/12/07 Python
Python3中exp()函数用法分析
2019/02/19 Python
Python3爬虫之自动查询天气并实现语音播报
2019/02/21 Python
python字符串和常用数据结构知识总结
2019/05/21 Python
NumPy中的维度Axis详解
2019/11/26 Python
viagogo法国票务平台:演唱会、体育比赛、戏剧门票
2017/03/27 全球购物
奢华时尚的创新平台:Baltini
2020/10/03 全球购物
大学毕业生简单自荐信
2013/11/05 职场文书
优秀志愿者事迹材料
2014/02/03 职场文书
环保建议书200字
2014/05/14 职场文书
2014年幼儿园教师工作总结
2014/11/08 职场文书
防汛通知
2015/04/25 职场文书
掌握这项技巧,一年阅读300本书不是梦
2019/09/12 职场文书
Python OpenCV实现图形检测示例详解
2022/04/08 Python
Python可视化神器pyecharts绘制地理图表
2022/07/07 Python