经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
详解vuex之store源码简单解析
来源:jb51  时间:2019/6/14 9:21:44  对本文有异议

关于vuex的基础部分学习于https://www.jb51.net/article/163008.htm

使用Vuex的时候,通常会实例化Store类,然后传入一个对象,包括我们定义好的actions、getters、mutations、state等。store的构造函数:

  1. export class Store {
  2. constructor (options = {}) {
  3. // 若window内不存在vue,则重新定义Vue
  4. if (!Vue && typeof window !== 'undefined' && window.Vue) {
  5. install(window.Vue)
  6. }
  7.  
  8. if (process.env.NODE_ENV !== 'production') {
  9. // 断言函数,来判断是否满足一些条件
  10. // 确保 Vue 的存在
  11. assert(Vue, `must call Vue.use(Vuex) before creating a store instance.`)
  12. // 确保 Promsie 可以使用
  13. assert(typeof Promise !== 'undefined', `vuex requires a Promise polyfill in this browser.`)
  14. assert(this instanceof Store, `store must be called with the new operator.`)
  15. }
  16.  
  17. // 解构赋值,拿到options里的plugins和strict
  18. const {
  19. plugins = [],
  20. strict = false
  21. } = options
  22.  
  23. // 创建内部属性
  24. // 标志一个提交状态,作用是保证对 Vuex 中 state 的修改只能在 mutation 的回调函数中,而不能在外部随意修改 state
  25. this._committing = false
  26. // 用来存储用户定义的所有的actions
  27. this._actions = Object.create(null)
  28. this._actionSubscribers = []
  29. // 用来存储用户定义所有的mutatins
  30. this._mutations = Object.create(null)
  31. // 用来存储用户定义的所有getters
  32. this._wrappedGetters = Object.create(null)
  33. // 用来存储所有的运行时的 modules
  34. this._modules = new ModuleCollection(options)
  35. this._modulesNamespaceMap = Object.create(null)
  36. // 用来存储所有对 mutation 变化的订阅者
  37. this._subscribers = []
  38. // 一个 Vue对象的实例,主要是利用 Vue 实例方法 $watch 来观测变化的
  39. this._watcherVM = new Vue()
  40.  
  41. // 把Store类的dispatch和commit的方法的this指针指向当前store的实例上
  42. const store = this
  43. const { dispatch, commit } = this
  44. this.dispatch = function boundDispatch (type, payload) {
  45. return dispatch.call(store, type, payload)
  46. }
  47. this.commit = function boundCommit (type, payload, options) {
  48. return commit.call(store, type, payload, options)
  49. }
  50.  
  51. // 是否开启严格模式
  52. this.strict = strict
  53.  
  54. const state = this._modules.root.state
  55.  
  56. // Vuex的初始化的核心,其中,installModule方法是把我们通过options传入的各种属性模块注册和安装;
  57. // resetStoreVM 方法是初始化 store._vm,观测 state 和 getters 的变化;最后是应用传入的插件。
  58. installModule(this, state, [], this._modules.root)
  59.  
  60. resetStoreVM(this, state)
  61. plugins.forEach(plugin => plugin(this))
  62.  
  63. const useDevtools = options.devtools !== undefined ? options.devtools : Vue.config.devtools
  64. if (useDevtools) {
  65. devtoolPlugin(this)
  66. }
  67. }
  68.  

Vuex本身是单一状态树,应用的所有状态都包含在一个大对象内,随着我们应用规模的不断增长,这个Store变得非常臃肿。为了解决这个问题,Vuex允许我们把store分模块。每一个模块包含各自的state、mutations、actions和getters,甚至还可以嵌套模块。

接下来看installModule方法:

  1. function installModule (store, rootState, path, module, hot) {
  2. // 通过path数组的长度判断是否为根
  3. const isRoot = !path.length
  4. const namespace = store._modules.getNamespace(path)
  5.  
  6. // register in namespace map
  7. if (module.namespaced) {
  8. store._modulesNamespaceMap[namespace] = module
  9. }
  10.  
  11. // 第一次调用时,path为空,不进入if
  12. // 递归调用installModule安装子模块时,将执行该代码块
  13. if (!isRoot && !hot) {
  14. const parentState = getNestedState(rootState, path.slice(0, -1))
  15. // 模块名
  16. const moduleName = path[path.length - 1]
  17. // 把当前模块的state添加到parentState中。具体解析见下
  18. store._withCommit(() => {
  19. Vue.set(parentState, moduleName, module.state)
  20. })
  21. }
  22.  
  23. const local = module.context = makeLocalContext(store, namespace, path)
  24.  
  25. // 对mutations、actions、getters进行注册
  26. module.forEachMutation((mutation, key) => {
  27. const namespacedType = namespace + key
  28. registerMutation(store, namespacedType, mutation, local)
  29. })
  30.  
  31. module.forEachAction((action, key) => {
  32. const type = action.root ? key : namespace + key
  33. const handler = action.handler || action
  34. registerAction(store, type, handler, local)
  35. })
  36.  
  37. module.forEachGetter((getter, key) => {
  38. const namespacedType = namespace + key
  39. registerGetter(store, namespacedType, getter, local)
  40. })
  41.  
  42. // 遍历modules,递归调用installModule安装子模块
  43. module.forEachChild((child, key) => {
  44. installModule(store, rootState, path.concat(key), child, hot)
  45. })
  46. }
  47. store_withCommit方法定义是这样的:
  48.  
  49. _withCommit (fn) {
  50. const committing = this._committing
  51. this._committing = true
  52. fn()
  53. this._committing = committing
  54. }
  55.  

Vuex中所有对state的修改都会用_withCommit函数包装,保证在同步修改state的过程中this._committing的值始终为true。这样当我们观测 state的变化时,如果this._committing的值不为true,则能检查到这个状态修改是有问题的。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持w3xue。

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号