原文链接：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>
