大家先看一下vuex的基本结构：
export default new Vuex.Store({ state: { user:{ name:'clying' } }, getters: { }, mutations: { }, actions: { } })
如何读取user里面的name?
在前天之前，我都是这样使用的：this.$store.state.user.name。
如果你也是这样使用的，那你和我一样，都OUT了！！！
vuex的getters是用来读取数据的！
vuex的mutations和actions是用来更改数据的,一个是异步，一个是同步修改。
之前我也只是了解这么多，但是！BUT！当我在写这篇文章的时候，发现之前的我也只是纸上谈兵。
通过getters来读取数据是没有问题的，对于上面那张图主要是讲的是数据共享（将组件获取到的信息赋值给user,其他组件可以通过getters可以获取）的问题。以前我是这样赋值的：
this.$store.user = JSON.parse(JSON.stringify(user))
emmmm,虽然知道了json格式的转换，但是依旧没用意识到vuex的强大！
好好看上面的那张图，vuex通过dispatch('方法名',参数)去调用actions里面的方法，actions通过commit去调用mutations里面的方法，在mutations里面对store里面的变量赋值，之后写入getters。组件通过访问getters里面的方法获得共享的数据。这才是vuex真正的数据赋值读取！也就是上图全是英文的单向数据流事件。
以下是一个简单的示例：
//组件内调用接口后获得的数据data存到store里的user //赋值组件 this.$store.dispatch("UPDATE_USER", data); //1.触发actions，UPDATE_USER方法名 //store export default new Vuex.Store({ state:{ user:{} }, getters:{ user:user => state.user; //4.getters对外暴露，让组件读取 }, mutations:{ UPDATE_USER_MU:(state,userInfo) => { state.user=userInfo; //3.在此真正修改state里面user的值 } }, actions:{ UPDATE_USER:({commit},userInfo) => { commit('UPDATE_USER_MU',userInfo); //2.commit触发mutatios } } }) //其他组件 cosnolse.log(this.$store.getters.user) //5.读取vuex里面的值
看到这，深有体悟的就是仔细看文档emmmm。。。小伙伴们一起加油！！！
作者：ClyingDeng
链接：https://juejin.cn/post/6844904001427734542
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
