实现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在光标位置插入内容的实现代码
Jun 18 Javascript
JavaScript去掉空格的方法集合
Dec 28 Javascript
仅IE支持clearAttributes/mergeAttributes方法使用介绍
May 04 Javascript
javascript单例模式的简单实现方法
Jul 25 Javascript
关于js里的this关键字的理解
Aug 17 Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
Dec 04 Javascript
Javascript基础知识盲点总结之函数
May 15 Javascript
Vue.js动态组件解析
Sep 09 Javascript
原生js封装添加class,删除class的实例
Nov 06 Javascript
在一个页面实现两个zTree联动的方法
Dec 20 Javascript
vue中使用rem布局代码详解
Oct 30 Javascript
详解element上传组件before-remove钩子问题解决
Apr 08 Javascript
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
destoon在360浏览器下出现用户被强行注销的解决方法
2014/06/26 PHP
改写ThinkPHP的U方法使其路由下分页正常
2014/07/02 PHP
PHP重定向与伪静态区别
2017/02/19 PHP
tp5(thinkPHP5)操作mongoDB数据库的方法
2018/01/20 PHP
extJs 下拉框联动实现代码
2010/04/09 Javascript
javascript获取URL参数与参数值的示例代码
2013/12/20 Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
2015/04/12 Javascript
基于Bootstrap实现tab标签切换效果
2020/04/15 Javascript
webuploader模态框ueditor显示问题解决方法
2016/12/27 Javascript
vue模板语法-插值详解
2017/03/06 Javascript
Javascript实现动态时钟效果
2018/11/17 Javascript
浅谈React Native 传参的几种方式(小结)
2019/05/21 Javascript
vue项目部署到nginx/tomcat服务器的实现
2019/08/26 Javascript
转换layUI的数据表格中的日期格式方法
2019/09/19 Javascript
Python 包含汉字的文件读写之每行末尾加上特定字符
2016/12/12 Python
python anaconda 安装 环境变量 升级 以及特殊库安装的方法
2017/06/21 Python
Python实现带参数与不带参数的多重继承示例
2018/01/30 Python
python顺序的读取文件夹下名称有序的文件方法
2018/07/11 Python
将pandas.dataframe的数据写入到文件中的方法
2018/12/07 Python
Python机器学习之scikit-learn库中KNN算法的封装与使用方法
2018/12/14 Python
详解如何减少python内存的消耗
2019/08/09 Python
python绘制BA无标度网络示例代码
2019/11/21 Python
parser.add_argument中的action使用
2020/04/20 Python
django和flask哪个值得研究学习
2020/07/31 Python
Python3 用matplotlib绘制sigmoid函数的案例
2020/12/11 Python
可爱的童装和鞋子:Fabkids
2019/08/16 全球购物
财务会计专业应届毕业生求职信
2013/10/18 职场文书
管理失职检讨书
2014/02/12 职场文书
锦旗赠语
2015/06/23 职场文书
小学同学聚会感言
2015/07/30 职场文书
基于Python的EasyGUI学习实践
2021/05/07 Python
pytorch交叉熵损失函数的weight参数的使用
2021/05/24 Python
Python Django框架介绍之模板标签及模板的继承
2021/05/27 Python
理解python中装饰器的作用
2021/07/21 Python
JavaCV实现照片马赛克效果
2022/01/22 Java/Android
MongoDB数据库部署环境准备及使用介绍
2022/03/21 MongoDB