vuex作为vue生态官方指定的状态管理方案,其重要性不言而喻,本文将一步一步完成一个mini版本,支持state和mutations
初始化,完成与vue的绑定
通过调用vue.use我们可以在组件内部拿到vue实例,并借用vue的mixin方法向每个组件中添加一个公用的生命周期beforeCreate。在这个钩子里向每一个组件的vnode上挂载一份store
将store中的数据设置为响应式
假设我们现在的store如下
由于我们在上一步已经完成了store数据的组件注入,故此时已经可以在组件中使用了
现在如果修改的话,页面并不会跟着更新
在初始化的时候,我们已经将vue保存下来了,那么就可以利用vue在初始化时会进行data的响应式处理这一特性
如此一来,当组件渲染过程中解析到使用处触发get方法向全局的dep收集,在sett时根据收集的all watcher遍历通知更新
实现mutations
在此之前,我们需要先做一点小小的调整。之前我们是直接将module返回出去了,这让我们的new操作显得很鸡肋,因为new操作符在接收到一个显式的对象return时候会使用该对象。尽管,这依然能达到状态存储的效果,但是我们却没法在不破坏module结构的前提下去添加一些公共的属性或api了
现在我们改向this绑定来重新实现
由于vue在对data处理后会在其实例上添加_data属性,故我们可以利用这个来访问响应式数据:当在组件内使用this.$store.state的时候我们实际上访问的是实例上的$$store
现在,我们来完成mutations功能,同时提供给用户修改接口:commit
那么现在我们要做的就是当调用commit时,拿到vue实例上存储的响应式数据进行修改即可,这会触发set继而触发watcher的update进行页面的重新render