vue--vuex

全局事件总线有时在实现时,比如A中的一个数据x,B,C,D都想用,则会有上图的复杂情况
Vuex的实现原理图:
1 state,mutation,actions他们都是对象
2 要经过store这个去管理
3 state像一盘菜,vue components像客人 , action 像服务员
4 mutation像后厨
5
6 vue components 会发指令store.dispatch() 给actions
7 其实vue components 也可以直接跟mutation对话
8 只是有时如要跟backend Apl(后端)对话时,要借用actions
9 然后mutation 接到 actions 或 vue components的指令后
10 开始去改变数据state
11 state再重新解析呈现到页面上
实现:
《具体实现》
将要公用的数据放到store中,因为已将Vue.use(Vuex),所以在vm与vc上都能看到store;
接下来是在组件中操作:
用dispatch来联系服务员actions,告诉他要我要什么:
在服务员actions中,一切业务逻辑写在actions中,actions在调用commit告诉厨师mutations作出东西来:
在actions中函数开头的参数是:压缩版的store,可以调用他找到state与方法:
以后的参数是我们传过来的:
厨师mutations 的第一个参数是state
以后的参数是我们传过来的: