实现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 相关文章推荐
JavaScript 计算图片加载数量的代码
Jan 01 Javascript
不同的jQuery API来处理不同的浏览器事件
Dec 09 Javascript
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
Feb 11 Javascript
jQuery.Highcharts.js绘制柱状图饼状图曲线图
Mar 14 Javascript
js图片切换具体实现代码
Oct 13 Javascript
Bootstrap Table使用方法解析
Oct 19 Javascript
微信小程序 支付功能开发错误总结
Feb 21 Javascript
浅析JS抽象工厂模式
Dec 14 Javascript
node的process以及child_process模块学习笔记
Mar 06 Javascript
JavaScript怎样在删除前添加确认弹出框?
May 27 Javascript
JS中的算法与数据结构之集合(Set)实例详解
Aug 20 Javascript
Vue 构造选项 - 进阶使用说明
Aug 14 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
一个oracle+PHP的查询的例子
2006/10/09 PHP
PHP中3种生成XML文件方法的速度效率比较
2012/10/06 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(九)
2014/06/24 PHP
PHP实现的英文名字全拼随机排号脚本
2014/07/04 PHP
PHP 实现文件压缩解压操作的方法
2019/06/14 PHP
Laravel创建数据库表结构的例子
2019/10/09 PHP
firefox中JS读取XML文件
2006/12/21 Javascript
Jquery实现仿新浪微博获取文本框能输入的字数代码
2013/02/22 Javascript
用js将内容复制到剪贴板兼容浏览器
2014/03/18 Javascript
jquery增加和删除元素的方法
2015/01/14 Javascript
使用命令对象代替switch语句的写法示例
2015/02/28 Javascript
jQuery javascript获得网页的高度与宽度的实现代码
2016/04/26 Javascript
js仿iphone秒表功能 计算平均数
2017/01/11 Javascript
js记录点击某个按钮的次数-刷新次数为初始状态的实例
2017/02/15 Javascript
bootstrap table实现点击翻页功能 可记录上下页选中的行
2017/09/28 Javascript
vue 添加vux的代码讲解
2017/11/30 Javascript
vue项目优化之通过keep-alive数据缓存的方法
2017/12/11 Javascript
JavaScript实现职责链模式概述
2018/01/25 Javascript
解决vue 表格table列求和的问题
2019/11/06 Javascript
python实现目录树生成示例
2014/03/28 Python
numpy 进行数组拼接,分别在行和列上合并的实例
2018/05/08 Python
python代码 输入数字使其反向输出的方法
2018/12/22 Python
解决Python3 控制台输出InsecureRequestWarning问题
2019/07/15 Python
python实现扫雷游戏的示例
2020/10/20 Python
HTML5: Web 标准最巨大的飞跃
2008/10/17 HTML / CSS
HTML5的结构和语义(5):交互
2008/10/17 HTML / CSS
香港通票:Hong Kong Pass
2019/02/26 全球购物
大学生职业生涯规划范文——找准自我,定位人生
2014/01/23 职场文书
升学宴主持词
2014/04/02 职场文书
人资专员岗位职责
2014/04/04 职场文书
学雷锋先进个人事迹
2014/05/26 职场文书
三月雷锋月活动总结
2014/07/03 职场文书
总经理检讨书
2014/09/15 职场文书
会议接待欢迎词范文
2015/01/26 职场文书
电力培训学习心得体会
2016/01/11 职场文书
MySQL 执行数据库更新update操作的时候数据库卡死了
2022/05/02 MySQL