Vuex 的图文理解

http://www.cnblogs.com/songdongdong/p/7116605.html

上面连接中vuex的actions 和 mutations的理解讲的不错

 

之前学vuex的时候，当时听的时候感觉理解了，可是过了几个月后就忘光了，这一段时间因为在做Vuex方面的项目所以又回过头来锊了一下vuex。这其中的各种关系我认为用图的方式更能方便理解。不废话上图说。

自己手画的有点糙。vuex 相当于一个容器，里面装了store 数据，如果要改变这个数据，得在mutaitions里改，那么流程就是

E组件改了值，通过watch监听，这个值一改变就触发了commit的setVal 函数，setVal函数又在vuex中把值给改了。vuex中的值变化后D 组件就拿到了变化后的值。

 

mutaitions  处理同步事件，

actions   处理异步请求，在异步请求的回调函数当中去触发mutaitions中的函数，来同步的改变mutaitions中的值

组件派发异步或批量事件给actions: this.$store.dispatch(' action函数名', 参数)

actions提交mutations来改变数据:this.$storage.commit('mutations函数名', 参数)

 

getters   这个是个派生值，可以把state里的值加工。  然后在组件里可以取加工后的值。

 

高级使用: ...mapState  ...mapMutations  ...mapGetters

A)扩展运算符...mapState,意思是把vuex的state数据映射到计算属性里面,映射后的名字为city,所以上面直接用this.city,就不用写this.$store.state.city这个长串了     

B)...mapMutation把本组件的mutations映射到changeCity方法里(changeCity在mutations里)

之前写法是this.$store.commit('changeCity',city)