如何实现vuex与组件data之间的数据更新-创新互联

小编给大家分享一下如何实现vuex与组件data之间的数据更新，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

问题

我们都知道，在Vue组件中，data部分的数据与视图之间是可以同步更新的，假如我们更新了data中的数据，那么视图上的数据就会被同步更新，这就是Vue所谓的数据驱动视图思想。

当我们使用Vuex时，我们也可以通过在视图上通过 $store.state.[DataKey] 来获取Vuex中 state 的数据，且当 state 中的数据发生变化时，视图上的数据也是可以同步更新的，这似乎看起来很顺利。

但是当我们想要通过将 state 中的数据绑定到Vue组件的 data 上，然后再在视图上去调用 data ，如下：

那么我们就会发现，当我们去改变 state 中的 userInfo 时，视图是不会更新的，相对应的 data 中的 userInfo 也不会被更改，因为这种调用方式是非常规的。

当Vue在组件加载完毕前，会将 data 中的所有数据初始化完毕，之后便只会被动改变数据。然而等组件数据初始化完毕之后，即使 state 中的数据发生了改变， data 中的数据与其并非存在绑定关系，data 仅仅在数据初始化阶段去调用了 state 中的数据，所以 data 中的数据并不会根据 state 中的数据发生改变而改变。

所以如果想在视图上实现与 state 中的数据保持同步更新的话，只能采用以下方式：

解决

那么如果我们必须想要在 data 上绑定 state 中的数据，让 state 去驱动 data 发生改变，那我们该如何做呢？

我们可以尝试以下两中方法：

1. 使用computed属性去获取state中的数据

这种方式其实并非是去调用了 data 中的数据，而是为组件添加了一个计算 computed 属性。computed 通常用于复杂数据的计算，它实际上是一个函数，在函数内部进行预算后，返回一个运算结果，同时它有一个重要的特性：当在它内部需要进行预算的数据发生改变后，它重新进行数据运算并返回结果。 所以，我们可以用 computed 去返回 state 中的数据，当 state 中的数据发生改变后，computed 会感知到，并重新获取 state 中的数据，并返回新的值。

2. 使用watch监听state中的数据

这种方式就很好理解了，就是通过组件的 watch 属性，为 state 中的某一项数据添加一个监听，当数据发生改变的时候触发监听事件，在监听事件内部中去更改 data 中对应的数据，即可变相的让 data 中的数据去根据 state 中的数据发生改变而改变。

以上是“如何实现vuex与组件data之间的数据更新”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联成都网站设计公司行业资讯频道！

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。