如何通过长尾词实现Vuex与组件data双向数据同步更新？

本文共计958个文字，预计阅读时间需要4分钟。

问题+我们都清楚，在Vue组件中，data部分的数据与视图之间是可以同步更新的。例如，如果我们更新了data中的数据，那么视图上的数据也会随之更新。这就是Vue所说的数据驱动视图思想。

问题

我们都知道，在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 中的所有数据初始化完毕，之后便只会被动改变数据。