You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
这样做是因为在组件中通过 this.$store 直接调用 dispatch/commit 方法时, 能够使 dispatch/commit 方法中的 this 指向当前的 store 对象而不是当前组件的 this。
我们知道 new Vue 时会把传入的对象的中的 this 绑定为 vm,例如 computed 属性,里面我们写如下代码时,会把计算属性里面的 this 绑定为当前的 vm 实例
computed: {// 计算属性的 getterreversedMessage: function(){// `this` 指向 vm 实例returnthis.message.split('').reverse().join('')}}
( 上面这段如有不妥,欢迎指出,谢谢 ^_^
接着就是 安装模块,vm 组件设置,传入插件以及 devtoolPlugin 插件的设置了
this.strict=strictconststate=this._modules.root.state// init root module.// this also recursively registers all sub-modules// and collects all module getters inside this._wrappedGettersinstallModule(this,state,[],this._modules.root)// initialize the store vm, which is responsible for the reactivity// (also registers _wrappedGetters as computed properties)resetStoreVM(this,state)// apply pluginsplugins.forEach(plugin=>plugin(this))if(Vue.config.devtools){devtoolPlugin(this)}
之前阅读过
![images](https://user-images.githubusercontent.com/12515800/36482431-423b8ba2-174e-11e8-9af2-32a694abd765.jpg)
redux
的源码,vuex
同样也是一个状态管理工具,之前开发 vue 应用的时候,用到的 vuex 也比较多,所以自然对 vuex 颇有兴趣,最主要的原因是我爱学习
,(不好意思,脸掉地上了),,哈哈哈哈哈哈(其实过年这几天也挺无聊的。。。
接下来我们来回归正题
![default](https://user-images.githubusercontent.com/12515800/36482580-cab229f0-174e-11e8-893a-0be4fc2ce1ed.jpg)
Vuex 是如何引入到 Vue 中的
我们都知道,在 Vue 中使用 Vuex 必须通过 Vue.use(Vuex) 方法来使用,所以先来瞄一瞄 Vue 对 Vuex 做了什么不可告人的事,惊恐.gif
来到 vue 源码下的
core/global-api/use.js
所以,vue 对插件还是挺温柔的,只用了它的一个安装函数进行插件的安装。好,我们来看看 vuex 的
install
函数在 store.js 的最下面,我们看到了它的身影
这里我们也可以看到 vuex 自己内部也做了一个限制,防止重复安装,最后该函数调用了
applyMixin(Vue)
咻一下,我们来到
mixin.js
,该函数也很简单,先是获取Vue
的版本号,如果版本是 2.0 以上版本,就使用Vue.mixin
来在所有组件中混入beforeCreate
生命钩子,对应的处理函数是vuexInit
,反之就向后兼容1.x
版本至此,前菜已经上齐了
主角 Store 闪亮登场
store.js
,别看长长一窜,有500多行,其实看进去了,你会感觉,也没啥可怕嘛该文件主要由一个
Store
类和一些辅助函数构成,我们先来看 这个构造类该构造函数中首先是进行一些必要的判断,如浏览器环境下自动安装、是否已经安装了 Vue、是否支持
Promise
,是否已经实例化了 Store 构造函数,其中用到了assert
断言函数然后是从传入的options 中提取出
plugins
和strict
,并做一些变量的初始化接着后面是对 dispatch 和 commit 函数中的 this 的重新绑定
这样做是因为在组件中通过 this.$store 直接调用 dispatch/commit 方法时, 能够使 dispatch/commit 方法中的 this 指向当前的 store 对象而不是当前组件的 this。
我们知道
new Vue
时会把传入的对象的中的this
绑定为vm
,例如computed
属性,里面我们写如下代码时,会把计算属性里面的 this 绑定为当前的 vm 实例( 上面这段如有不妥,欢迎指出,谢谢 ^_^
接着就是 安装模块,vm 组件设置,传入插件以及
devtoolPlugin
插件的设置了接下来我们先不讲
dispatch
和commit
是怎么实现的,先来重点关注下modules
这部分由于现在的篇幅也算可以了,怕大家看到长篇大论头疼,所以我们转移阵地。
(如有不当,欢迎指出,谢谢 ^_^
The text was updated successfully, but these errors were encountered: