怎么实现一个简单的vuex

　　介绍

这篇文章主要介绍怎么实现一个简单的vuex,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

首先我们需要知道为何要使用vuex。父子组件通信用道具和自定义事件可以搞的定,简单的非父子组件通信用总线(一个空的Vue实例)。那么使用vuex就是为了解决复杂的非父子组件通信。

仅仅会使用vuex没什么,看过文档敲敲代码大家都会。难道你就不想知道vuex是如何实现的? !

抛开vuex的源码,我们先来想想如何实现一个简单的“vuex"。有多简单呢,我不要吸气,突变,行动等,我只要状态就行了。

<强>非父子组件通信

在实现之前,我们得来温故一下巴士的实现,借用官网的例子:

var  bus =, new  Vue ()//,触发组件,A 中的事件 　　公共汽车。美元发出(& # 39;id-selected& # 39;,, 1)//,在组件,B 创建的钩子中监听事件 　　公共汽车。美元(& # 39;id-selected& # 39;,, function  (id), { 　　,//? 　　})

遥想当年,实例化后的总线不知放哪好,最后无奈将其放到下了窗口,一直窗口。公共汽车的使用。虽然这样也没问题,但还是影响到了全局作用域。

突然的某一天,我发现可以挂载在vue的根实例下(从此告别窗口。公共汽车),于是便有了:

var  app =, Vue ({new  　　,el: & # 39; #应用# 39; 　　,公共汽车:汽车 　　})//,使用,公共汽车 　　应用。options.bus美元//或 　　根。选择美元。总线

然后又发现了,巴士其实不只是> var  bus =, Vue ({new  　　,数据:{ 　　,,数:0 　　,} 　　})

以上,子组件一个修改了计数,如果子组件b有用到数,那么它就能响应到最新计数的值。

说了这么多,你还没发现吗?这个不就是实现了非组件之间通信,vuex的状态吗? !

<强>封装总线

是的,把刚刚的总线封装一下,这个就是一个最简单的“vuex"(仅仅只有状态的功能)。首先,我们将有一个根实例应用,实例下有两个非父子组件才能和childB。

html代码的实现如下:

& lt; div  id=癮pp"比; 　　,& lt; child-a> & lt;/child-a> 　　,& lt; child-b> & lt;/child-b> 　　& lt;/div>

<强>非父子组件的实现

然后是两个非父子组件和应用的实现,子组件都使用到了总线的计数,这里用商店。状态表示,跟vuex一致:

//,待实现 　　const  store =, new 商店(Vue, { 　　,状态:{ 　　,,数:0 　　,} 　　})//,子组件, 　　const  childA =, { 　　,模板:& # 39;& lt; button  @click=癶andleClick"祝辞click  me & # 39; 　　,方法:{ 　　handleClick 才能;(),{ 　　,,,store.state.count 美元;+=1 　　,,} 　　,} 　　}//,子组件,b 　　const  childB =, { 　　,模板:& # 39;& lt; div>数:,{{,count }} & lt;/div> & # 39; 　　,计算:{ 　　count 才能;(),{ 　　return 这。才能store.state.count美元 　　,,} 　　,} 　　} 　　 　　Vue ({new  　　,el: & # 39; #应用# 39; 　　,组件:{ 　　& # 39;才能child-a& # 39;:,才能, 　　& # 39;才能child-b& # 39;: childB 　　}, 　　,存储:存储 　　})

看到代码里还有一个商店待实现。所需要的参数,因为这里懒得用Vue.use(),所以直接将Vue作为参数传入以供使用,然后第二个参数跟我们使用vuex传入的参数一致。

<强>存储的实现

接下来就是商店的实现,两步实现:

<李>

创建一个总线实例;

<李>

让子组件都能访问到这一点。李美元商店。

第1步骤上面已经有了,第2步骤主要用到了Vue。mixin来全局混入,但仅仅只是找到有商店的根实例并赋值Vue原型上的商店,也能够让根实例应用不用专门写mixin混入。

class  Store  { 　　,constructor  (Vue,选项),{ 　　var 才能;bus =, Vue ({new  　　,,,数据:{ 　　,,,状态:options.state 　　,,} 　　})才能 　　 　　this.install才能(Vue,总线) 　　,} 　　, 　　,install  (Vue,总线),{ 　　Vue.mixin({才能 　　,,beforeCreate  (), { 　　,,,if  (。options.store美元),{ 　　,,,,Vue.prototype store 美元;=,公共汽车 　　,,,} 　　,,} 　　})才能 　　,} 　　}

实现的商店就是一个简单的“vuex",它拥有了vuex的状态,足够让非父子组件之间进行简单通信。

在商店的构造函数里创建一个总线实例,并将其注入Vue的原型,实现了组件都能访问到这一点。美元商店即总线实例。。商店就美元是一个Vue实例,所以访问了。store.state美元。计算实际上就是访问到了数据,从而实现了非父子组件之间的响应同步。全部源码参考这里。

怎么实现一个简单的vuex