Vuex到底怎么用？！

大家先看一下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。。。小伙伴们一起加油！！！