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

原文链接：https://blog.csdn.net/u012925833/java/article/details/90264152
错误方式

<template>
 <div>{{userInfo}}</div> 
</template>
 
<script>
export default {
 data() {
 return {
  userInfo: this.$store.state.userInfo;
 };
 }
};
</script>

这种方式不能实现state中的数据与template中的数据实时更新
因为state中的数据与data中的数据不存在绑定关系，所以vue组件初始化完毕后，若state中的数据发生改变，data中的数据不能监听到，不能重新给他赋值

mustache
直接在mustache中使用state中的数据

<template>
 <div>{{$store.state.userInfo}}</div> 
</template>

通过computed属性
computed 属性中的方法中依赖的数据发生改变的时候，方法就会重新计算并返回结果

<template>
 <div>{{userInfo}}</div> 
</template>

<script>
export default {
  computed: {
    userInfo(){
          return this.$store.state.userInfo
       }
    }
 };
</script>

通过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>