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

以后的参数是我们传过来的:

 

posted @ 2022-05-22 15:26  次林梦叶  阅读(27)  评论(0)    收藏  举报