实现vuex与组件data之间的数据同步更新方式
问题
我们都知道，在Vue组件中，data部分的数据与视图之间是可以同步更新的，假如我们更新了data中的数据，那么视图上的数据就会被同步更新，这就是Vue所谓的数据驱动视图思想。
当我们使用Vuex时，我们也可以通过在视图上通过$store.state.[DataKey]来获取Vuex中state的数据，且当state中的数据发生变化时，视图上的数据也是可以同步更新的，这似乎看起来很顺利。
但是当我们想要通过将state中的数据绑定到Vue组件的data上，然后再在视图上去调用data，如下：
{{userInfo}}
那么我们就会发现，当我们去改变state中的userInfo时，视图是不会更新的，相对应的data中的userInfo也不会被更改，因为这种调用方式是非常规的。
当Vue在组件加载完毕前，会将data中的所有数据初始化完毕，之后便只会被动改变数据。然而等组件数据初始化完毕之后，即使state中的数据发生了改变，data中的数据与其并非存在绑定关系，data仅仅在数据初始化阶段去调用了state中的数据，所以data中的数据并不会根据state中的数据发生改变而改变。
所以如果想在视图上实现与state中的数据保持同步更新的话，只能采用以下方式：
{{$store.state.userInfo}}
解决
那么如果我们必须想要在data上绑定state中的数据，让state去驱动data发生改变，那我们该如何做呢？
我们可以尝试以下两中方法：
1.使用computed属性去获取state中的数据
这种方式其实并非是去调用了data中的数据，而是为组件添加了一个计算computed属性。computed通常用于复杂数据的计算，它实际上是一个函数，在函数内部进行预算后，返回一个运算结果，同时它有一个重要的特性：当在它内部需要进行预算的数据发生改变后，它重新进行数据运算并返回结果。所以，我们可以用computed去返回state中的数据，当state中的数据发生改变后，computed会感知到，并重新获取state中的数据，并返回新的值。
{{userInfo}}
2.使用watch监听state中的数据
这种方式就很好理解了，就是通过组件的watch属性，为state中的某一项数据添加一个监听，当数据发生改变的时候触发监听事件，在监听事件内部中去更改data中对应的数据，即可变相的让data中的数据去根据state中的数据发生改变而改变。
{{userInfo}}
以上这篇实现vuex与组件data之间的数据同步更新方式就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。