实现vuex与组件data之间的数据同步更新方式


Posted in Javascript onNovember 12, 2019

问题

我们都知道,在Vue组件中,data部分的数据与视图之间是可以同步更新的,假如我们更新了data中的数据,那么视图上的数据就会被同步更新,这就是Vue所谓的数据驱动视图思想。

当我们使用Vuex时,我们也可以通过在视图上通过 $store.state.[DataKey] 来获取Vuex中 state 的数据,且当 state 中的数据发生变化时,视图上的数据也是可以同步更新的,这似乎看起来很顺利。

但是当我们想要通过将 state 中的数据绑定到Vue组件的 data 上,然后再在视图上去调用 data ,如下:

<template>
 <div>{{userInfo}}</div> 
</template>

<script>
export default {
 data() {
 return {
  userInfo: this.$store.state.userInfo;
 };
 }
};
</script>

那么我们就会发现,当我们去改变 state 中的 userInfo 时,视图是不会更新的,相对应的 data 中的 userInfo 也不会被更改,因为这种调用方式是非常规的。

当Vue在组件加载完毕前,会将 data 中的所有数据初始化完毕,之后便只会被动改变数据。然而等组件数据初始化完毕之后,即使 state 中的数据发生了改变, data 中的数据与其并非存在绑定关系,data 仅仅在数据初始化阶段去调用了 state 中的数据,所以 data 中的数据并不会根据 state 中的数据发生改变而改变。

所以如果想在视图上实现与 state 中的数据保持同步更新的话,只能采用以下方式:

<template>
 <div>{{$store.state.userInfo}}</div> 
</template>

解决

那么如果我们必须想要在 data 上绑定 state 中的数据,让 state 去驱动 data 发生改变,那我们该如何做呢?

我们可以尝试以下两中方法:

1. 使用computed属性去获取state中的数据

这种方式其实并非是去调用了 data 中的数据,而是为组件添加了一个计算 computed 属性。computed 通常用于复杂数据的计算,它实际上是一个函数,在函数内部进行预算后,返回一个运算结果,同时它有一个重要的特性:当在它内部需要进行预算的数据发生改变后,它重新进行数据运算并返回结果。 所以,我们可以用 computed 去返回 state 中的数据,当 state 中的数据发生改变后,computed 会感知到,并重新获取 state 中的数据,并返回新的值。

<template>
 <div>{{userInfo}}</div> 
</template>

<script>
export default {
 computed: {
 userInfo(){
  return this.$store.state.userInfo;
 }
 }
};
</script>

2. 使用watch监听state中的数据

这种方式就很好理解了,就是通过组件的 watch 属性,为 state 中的某一项数据添加一个监听,当数据发生改变的时候触发监听事件,在监听事件内部中去更改 data 中对应的数据,即可变相的让 data 中的数据去根据 state 中的数据发生改变而改变。

<template>
 <div>{{userInfo}}</div> 
</template>

<script>
export default {
 data() {
 return {
  userInfo: this.$store.state.userInfo;
 };
 },
 watch: {
 "this.$store.state.userInfo"() {
  this.userInfo = this.$store.getters.getUserInfo; // 按照规范在这里应该去使用getters来获取数据
 }
 }
};
</script>

以上这篇实现vuex与组件data之间的数据同步更新方式就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery选择器特辑 详细小结
May 14 Javascript
利用jquery写的左右轮播图特效
Feb 12 Javascript
ECMAScript6函数剩余参数(Rest Parameters)
Jun 12 Javascript
简述AngularJS相关的一些编程思想
Jun 23 Javascript
javascript图片预加载完整实例
Dec 10 Javascript
Vuejs第十一篇组件之slot内容分发实例详解
Sep 09 Javascript
Vue中使用webpack别名的方法实例详解
Jun 19 Javascript
js+html5实现手机九宫格密码解锁功能
Jul 30 Javascript
微信小程序数据统计和错误统计的实现方法
Jun 26 Javascript
初试vue-cli使用HBuilderx打包app的坑
Jul 17 Javascript
javascript实现简易数码时钟
Mar 30 Javascript
vue-element-admin项目导入和导出的实现
May 21 Vue.js
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能
Nov 12 #Javascript
基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能
Nov 12 #Javascript
vuex管理状态 刷新页面保持不被清空的解决方案
Nov 11 #Javascript
vuex实现数据状态持久化
Nov 11 #Javascript
vue 更改连接后台的api示例
Nov 11 #Javascript
vue路由守卫,限制前端页面访问权限的例子
Nov 11 #Javascript
vue在路由中验证token是否存在的简单实现
Nov 11 #Javascript
You might like
php采集时被封ip的解决方法
2010/08/29 PHP
PHP 图片水印类代码
2012/08/27 PHP
解决Codeigniter不能上传rar和zip压缩包问题
2014/03/07 PHP
php判断文件夹是否存在不存在则创建
2015/04/09 PHP
符合W3C网页标准的iframe标签的使用方法
2007/07/19 Javascript
比较简单的异步加载JS文件的代码
2009/07/18 Javascript
Jquery操作js数组及对象示例代码
2014/05/11 Javascript
使用C++为node.js写扩展模块
2015/04/22 Javascript
js实现根据身份证号自动生成出生日期
2015/12/15 Javascript
AngularJS中的指令全面解析(必看)
2016/05/20 Javascript
js前端解决跨域问题的8种方案(最新最全)
2016/11/18 Javascript
JavaScript 最佳实践:帮你提升代码质量
2016/12/03 Javascript
windows 下安装nodejs 环境变量设置
2017/02/02 NodeJs
Vue.js 中的 $watch使用方法
2017/05/25 Javascript
利用JS如何计算字符串所占字节数示例代码
2017/09/13 Javascript
微信小程序画布圆形进度条显示效果
2020/11/17 Javascript
js中自定义react数据验证组件实例详解
2018/10/19 Javascript
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
2018/10/25 Javascript
Vue动态加载异步组件的方法
2018/11/21 Javascript
jQuery Migrate 插件用法实例详解
2019/05/22 jQuery
Django实现分页显示效果
2019/10/31 Python
centos+nginx+uwsgi+Django实现IP+port访问服务器
2019/11/15 Python
Python实现发票自动校核微信机器人的方法
2020/05/22 Python
python利用os模块编写文件复制功能——copy()函数用法
2020/07/13 Python
学点简单的Django之第一个Django程序的实现
2021/02/24 Python
美国现代家具和家居商店:Apt2B
2016/08/29 全球购物
ProBikeKit澳大利亚:自行车套件,跑步和铁人三项装备
2016/11/30 全球购物
快递业务员岗位职责
2014/01/06 职场文书
司马光教学反思
2014/02/01 职场文书
护理专业学生职业生涯规划范文
2014/03/11 职场文书
2015年新教师工作总结
2015/04/28 职场文书
委托书范本格式
2019/04/18 职场文书
90行Python代码开发个人云盘应用
2021/04/20 Python
MySQL注入基础练习
2021/05/30 MySQL
Python实现视频中添加音频工具详解
2021/12/06 Python
奥特曼十大神器:奥特手镯在榜,第一是贝利亚的神器
2022/03/18 日漫