vue：使用vuex数据如何做到“响应式”

1.在.vue文件的模板语法，也就是<template>标签里直接使用vuex数据，比如，

是具有“响应式”的，即vuex中的person地址发生改变，或者person.name发生改变，即无论是引用或非引用类型的数据，{{$store.state.test.person.name}}都会更新。

2.在data节点中声明一个变量保存引用或非引用类型的数据，如

这种情况，无论是引用或非引用类型的数据，组件data里的数据都不会发生改变（还保存之前的数据），视图因此不会更新。

并且，如果你直接修改这个变量（person），vue也不会提示你不要直接修改vuex state，这也说明这个变量不能跟随vuex数据的改变而改变，可能都不在vuex的监测范围内。

因为data里定义好的变量，vue都会去做一个数据劫持代理，你只可以通过在这个组件内修改才会有响应式，而直接把vuex的state赋值给data变量，改变vuex数据，data中对应被赋值的变量并不会跟着改变，就和写死变量值没有太大区别。（个人推测）

3.使用mapState，如下

 引用或非引用类型的数据都可以更新，并且在vue devtools里，组件中可以看到多出vuex bindings

 4.使用mapGetter，和mapState一样，毫无疑问，数据是响应式的。

所以使用vuex数据时，最好还是用mapState或者mapGetter，要么你就直接写在template标签里，千万不要写在data里用变量接收。这可以省去你很多不必要的麻烦。

如果你在vue2使用了mapState或者mapGetter，视图却没有更新，那么注意是否对于引用类型数据没有使用vue2约定的方法（对象新增属性、数组包装方法）

更新：

关于vue2 vuex再补充一些：

在vuex中使用引用类型数据时要尤为的小心，对于state中引用类型变量相互引用、或者组件内修改引用类型变量等等情况，都应小心。

关于vue组件、vuex状态响应式的原理日后再探讨，这里先必坑。

持续更新中。。。

如有错误请指正