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

问题

我们都知道，在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之间的数据同步更新方式就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue 父子组件的数据传递、修改和更新方法

    父子组件之间的数据关系,我这边将情况具体分成下面4种: 父组件修改子组件的data,并实时更新 子组件通过$emit传递子组件的数据,this.$data指当前组件的data(return{...})里的所有数据, this.$emit('data',this.$data); 之后通过父组件的getinputdata方法来接收数据 @data='getinputdata' 其中的data就是传过来的数据,通过修改这个数据就可以通过父组件实时更新子组件 getinputdata(data) { c

  • vue+vuex+axio从后台获取数据存入vuex实现组件之间共享数据

    vue+vuex+axio从后台获取数据存入vuex实现组件之间共享数据

    在vue项目中组件间相互传值或者后台获取的数据需要供多个组件使用的情况很多的话,有必要考虑引入vuex来管理这些凌乱的状态,今天这边博文用来记录这一整个的过程,后台api接口是使用webpack-server模拟的接口,这个前面的文章中有提到,需要的可以去翻阅. 整个的流程是在组件的created中提交dispatch,然后通过action调用一个封装好的axios然后再触发mutation来提交状态改变state中的数据,然后在组件的计算属性中获取state的数据并渲染在页面上 首先新需要在项

  • vue组件之间的数据传递方法详解

    (1)props属性: 在父组件中,可以通过子组件标签属性的形式将数据或者函数传给子组件,子组件通过props去读取父组件传过来的数据 用法 父组件传数据给子组件: 一般的属性值都是用来给子组件展示的 子组件传数据给父组件 属性值为函数类型的,一般是用来子组件向父组件传递数据,子组件通过调用父组件传过来的函数,可以修改父组件的状态数据 缺点: 隔层组件间传递: 必须逐层传递(麻烦) 兄弟组件间: 必须借助父组件(麻烦) 注意: //子组件获取父组件传过来的值 props: { obj: {//o

  • vuex 实现getter值赋值给vue组件里的data示例

    通过watch将orderDetailsData对象赋值给data中的consignee对象,这样能将操作能避免v-model修改时,直接改动vuex中的值. <template> <input type="text" placeholder="请输入收货人名字" v-model="consignee.name"> <input type="text" placeholder="请输入收

  • 父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法

    场景: 我实际用到的是这样的,我父组件引用子组件related,父组件调用获取页面详情的方法,更新了state值related,子组件根据该related来渲染相关新闻内容,但是页面打开的时候总是先加载子组件,子组件在渲染的时候还没有获取到更新之后的related值,即使在子组件中watch该值的变化依然不能渲染出来子组件的相关新闻内容. 我的解决办法: 父组件像子组件传值,当父组件执行了获取页面详情的方法之后,state值related更新,然后传给子组件,子组件再进行渲染,可以正常获取到.

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

    问题 我们都知道,在Vue组件中,data部分的数据与视图之间是可以同步更新的,假如我们更新了data中的数据,那么视图上的数据就会被同步更新,这就是Vue所谓的数据驱动视图思想. 当我们使用Vuex时,我们也可以通过在视图上通过 $store.state.[DataKey] 来获取Vuex中 state 的数据,且当 state 中的数据发生变化时,视图上的数据也是可以同步更新的,这似乎看起来很顺利. 但是当我们想要通过将 state 中的数据绑定到Vue组件的 data 上,然后再在视图上去

  • 数据库中两张表之间的数据同步增加、删除与更新实现思路

    分别创建增加.删除.更新的触发器(Trigger)来达到两张表之间数据同步的目的. 1:数据同步增加: 如有两张表--A表和B表,创建触发器使当A表插入数据后B表也同步插入数据.其中B表插入数据的字段需要同A表中的字段相对应. 复制代码 代码如下: CREATE TRIGGER 触发器名称 ON A表 AFTER INSERT AS BEGIN INSERT INTO B表(B表字段1,B表字段2,B表字段3) SELECT A表字段1,A表字段2,A表字段3 FROM INSERTED END

  • vue中data里面的数据相互使用方式

    vue中data里面的数据相互使用方式

    目录 data里面的数据相互使用 具体代码如下 data里的数据不能相互引用问题 data里面的数据相互使用 今天在写代码的时候,遇到一个问题,我想使用data里面的一个对象使用data里面的某个数据,附图片: 我想让active的值给params对象里面的topicListType使用,我不想直接在一个方法里面改变这个值(想改的话就直接可以改了,太简单),所以就有了这个想法. 在data里面使用,但是肯定不能写成 this.params.topicListType: this.active,这

  • 一文带你了解微信小程序数据绑定、事件绑定以及事件传参、数据同步

    目录 数据绑定 基本原则 在data中定义数据 Mustache语法 Mustache语法的应用 绑定内容 绑定属性 运算(三元运算.算术运算等) 事件绑定 什么是事件? 常用事件 事件对象属性 target与currentTarget的区别 bindtap语法格式 在事件处理函数中为data赋值 事件传参 查看参数 bindinput语法格式 实现文本框与data之间的数据同步 总结 数据绑定 基本原则 在data中定义数据 在WXML中使用数据 在data中定义数据 在页面对应的.js 文件

  • 详解小程序开发经验：多页面数据同步

    详解小程序开发经验：多页面数据同步

    导语:本文主要介绍在小程序中,多页面之间如何保持数据同步 在很多的产品中,都会存在跨页面间需要数据同步,如下示例: 为了更好的理解该场景,我们再详细描绘一下: 本场景包括4个页面:动态广场.个人中心.我的动态.动态详情 首先,进入动态广场页,请求加载数据,展示动态列表,其中,我们用绿色内阴影区分该条动态是"我的",其他未加内阴影的表示是"别人的": 然后,进入个人中心页,请求加载数据,展示获赞数量: 点击我的动态,进入我的动态页,请求加载数据,展示我的动态列表: 点

  • Oracle通过LogMiner实现数据同步迁移

    写在前面 最近在研究如何实现Oracle数据库之间的数据同步,网上的资料确实比较少.最好用的Oracle数据库同步工具是:GoldenGate ,而GoldenGate是要收费的.那么还有什么好的办法来同步Oracle的数据吗?没错,就是使用LogMiner来实现Oracle数据同步迁移. 实现过程 1.创建目录 在服务器上创建/home/oracle/tools/oracle11g/oradata/orcl/LOGMNR目录来存储数据库的字典信息,如下所示. mkdir -p /home/or

  • 使用mongoshake实现mongodb数据同步的操作方法

    使用mongoshake实现mongodb数据同步的操作方法

    目录 前言 使用场景 搭建步骤 环境准备 一.搭建mongodb复制集 二.mongoshake配置 前言 MongoShake是阿里云以Golang语言编写的通用平台型服务工具,它通过读取MongoDB的Oplog操作日志来复制MongoDB的数据以实现特定需求. MongoShake还提供了日志数据的订阅和消费功能,可通过SDK.Kafka.MetaQ等方式的灵活对接,适用于日志订阅.数据中心同步.Cache异步淘汰等场景. 官方地址:https://github.com/alibaba/M

  • SpringBoot定时任务实现数据同步的方法

    本文实例为大家分享了SpringBoot定时任务实现数据同步的具体代码,供大家参考,具体内容如下 前言 业务的需求是,通过中台调用api接口获得,设备数据,要求现实设备数据的同步. 方案一:通过轮询接口的方式执行 pullData() 方法实现数据同步 该方式的原理是先清空之前的所有数据,然后重新插入通过api调用获取的最新数据.该方法的优点,逻辑简单.缺点是,频繁删除.插入数据.再调用查询数据时候,某一时刻,数据全部删除,还没及时插入的时候.数据可能有异常. 方案二:通过轮询接口的方式执行 p

  • Java多线程实现第三方数据同步

    本文实例为大家分享了Java多线程实现第三方数据同步的具体代码,供大家参考,具体内容如下 一.场景 最近的一项开发任务是同步第三方数据,而第三方数据一般有存量数据和增量数据,存量数据有100w+.在得知此需求时,进行了一定的信息检索和工具学习,提前获取存量数据到目标库,再使用kettle进行存量数据转换:增量数据则根据业务方规定的请求时间,通过定时任务去获取增量数据并进行数据转换.在数据获取和转换时,我们应该要记录每一次的请求信息,便于溯源和数据对账!!! 二.获取数据的方式 2.1 递归方式

  • mysql 触发器实现两个表的数据同步

    mysql通过触发器实现两个表的同步 目前,在本地测试成功. 假设本地的两个数据库a和b,a下有表table1(id, val) b下有表table2(id, val) 假设希望当table1中数据更新,table2中数据同步更新. 代码: DELIMITER $$ CREATE /*[DEFINER = { user | CURRENT_USER }]*/ TRIGGER `a`.`触发器名` BEFORE UPDATE ON `a`.`table1` FOR EACH ROW BEGIN I

随机推荐