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 相关文章推荐
深入了解Vue3模板编译原理
Nov 19 Vue.js
VUE+Element实现增删改查的示例源码
Nov 23 Vue.js
Vue组件生命周期运行原理解析
Nov 25 Vue.js
Vue用mixin合并重复代码的实现
Nov 27 Vue.js
解决vue下载后台传过来的乱码流的问题
Dec 05 Vue.js
Vue实现随机验证码功能
Dec 29 Vue.js
vue中父子组件的参数传递和应用示例
Jan 04 Vue.js
如何在Vue项目中添加接口监听遮罩
Jan 25 Vue.js
vue中使用mockjs配置和使用方式
Apr 06 Vue.js
vue里使用create, mounted调用方法
Apr 26 Vue.js
详解Vue3使用axios的配置教程
Apr 29 Vue.js
vue-cli3.x配置全局的scss的时候报错问题及解决
Apr 30 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
【动漫杂谈】关于《请在T台上微笑》
2020/03/03 日漫
五个PHP程序员工具
2008/05/26 PHP
PHP5 操作MySQL数据库基础代码
2009/09/29 PHP
zend framework多模块多布局配置
2011/02/26 PHP
thinkphp实现面包屑导航(当前位置)例子分享
2014/05/10 PHP
ThinkPHP有变量的where条件分页实例
2014/11/03 PHP
jQuery 1.0.2
2006/10/11 Javascript
jquery利用event.which方法获取键盘输入值的代码
2011/10/09 Javascript
js切换div css注意的细节
2012/12/10 Javascript
javascript数组的使用
2013/03/28 Javascript
JavaScript的strict模式与with关键字介绍
2014/02/08 Javascript
node.js中的http.response.write方法使用说明
2014/12/14 Javascript
jQuery动画出现连续触发、滞后反复执行的解决方法
2015/01/28 Javascript
Javascript核心读书有感之词法结构
2015/02/01 Javascript
js实现可键盘控制的简单抽奖程序
2016/07/13 Javascript
前端设计师们最常用的JS代码汇总
2016/09/25 Javascript
微信通过页面(H5)直接打开本地app的解决方法
2017/09/09 Javascript
浅谈Node.js之异步流控制
2017/10/25 Javascript
解决option标签selected=&quot;selected&quot;属性失效的问题
2017/11/06 Javascript
nodejs中art-template模板语法的引入及冲突解决方案
2017/11/07 NodeJs
不到200行 JavaScript 代码实现富文本编辑器的方法
2018/01/03 Javascript
vue实现Excel文件的上传与下载功能的两种方式
2019/06/28 Javascript
node.js使用 http-proxy 创建代理服务器操作示例
2020/02/10 Javascript
[04:29]【TI9采访】OG.N0tail在胜者组决赛后接受采访
2019/08/25 DOTA
python获取指定网页上所有超链接的方法
2015/04/04 Python
解密Python中的描述符(descriptor)
2015/06/03 Python
Python cookbook(数据结构与算法)筛选及提取序列中元素的方法
2018/03/19 Python
Python字符串、列表、元组、字典、集合的补充实例详解
2019/12/20 Python
python FTP批量下载/删除/上传实例
2019/12/22 Python
spyder 在控制台(console)执行python文件,debug python程序方式
2020/04/20 Python
python实现飞船游戏的纵向移动
2020/04/24 Python
python实现按日期归档文件
2021/01/30 Python
机工车间主任岗位职责
2014/03/05 职场文书
银行求职自荐信
2014/06/30 职场文书
家长高考寄语
2015/02/27 职场文书
MySQL索引失效的典型案例
2021/06/05 MySQL