实现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之间的数据同步更新方式就是小编分享给大家的全部内容了,希望能给大家一个参考
您可能感兴趣的文章:
- 解决vue中修改了数据但视图无法更新的情况
- 解决vue keep-alive 数据更新的问题
- 解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题
- vue 解决异步数据更新问题
- Vue 父子组件的数据传递、修改和更新方法
- vue.js通过自定义指令实现数据拉取更新的实现方法
- 谈谈对vue响应式数据更新的误解
- Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
- Vue2.X 通过AJAX动态更新数据
- Vue.js+Layer表格数据绑定与实现更新的实例
- 详解vue中的父子传值双向绑定及数据更新问题
- VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析
- 不同数据源之间数据同步的几种实现方式
- 不同数据源之间数据同步的几种实现方式
- Kettle 合并记录和Merge Join组件实现数据增量迁移(数据同步比插入更新快
- 不同数据源之间数据同步的几种实现方式
- 不同数据源之间数据同步的集中实现方式
- 数据库中两张表之间的数据同步实现思路(增加、删除、更新)
- vuex 实现vue中多个组件之间数据同步以及数据共享。
- vue+vuex+axio从后台获取数据存入vuex实现组件之间共享数据
- 数据库中两张表之间的数据同步增加、删除与更新实现思路
- 数据库中两张表之间的数据同步增加、删除与更新实现思路
- 利用复制技术实现数据同步更新
- 利用数据库复制技术实现数据同步更新(SQL SERVER)
- 步步为营VS 2008 + .NET 3.5(13) - DLINQ(LINQ to SQL)之用户自定义函数、在不同的DataContext之间做更新、缓存、获取信息、数据加载选项和延迟加载
- CacheDependency 实现xml文件与缓存数据同步更新
- 利用数据库复制技术 实现数据同步更新
- SQL 表与表之间的数据更新不同方式
- 利用数据库复制技术实现数据同步更新_SQL SERVER
- 利用viewstack组件实现各个子组件之间的跳转和数据传递
- 安装布署rsync+Inotify实现数据的实时同步更新
- 【甘道夫】实现Hive数据同步更新的shell脚本