VUEX 3.x源码分析——6. 理解命名空间namespace

这是对vuex3版本的源码分析。
本次分析会按以下方法进行：

1. 按官网的使用文档顺序，围绕着某一功能点进行分析。这样不仅能学习优秀的项目源码，更能加深对项目的某个功能是如何实现的理解。这个对自己的技能提升，甚至面试时的回答都非常有帮助。
2. 在围绕某个功能展开讲解时，所有不相干的内容都会暂时去掉，等后续涉及到对应的功能时再加上。这样最大的好处就是能循序渐进地学习，同时也不会被不相干的内容影响。省略的内容都会在代码中以…表示。
3. 每段代码的开头都会说明它所在的文件目录，方便定位和查阅。如果一个函数内容有多个函数引用，这些都会放在同一个代码块中进行分析，不同路径的内容会在其头部加上所在的文件目录。

本章只讲解vuex中的Module的命名空间，这也是vuex官网中“核心概念”的最后一个。
想了解vuex中的其他源码分析，欢迎参考我发布的下列文章：
VUEX 3 源码分析——1. 理解State
VUEX 3 源码分析——2. 理解Getter
VUEX 3 源码分析——3. 理解Mutations
VUEX3 源码分析——4. 理解Action
VUEX 3 源码分析——5. 理解Module
VUEX 3 源码分析——6. 理解命名空间namespace
VUEX 3 源码分析——7. 模块的动态注册和卸载

回顾Module

• 在Module的分析中已经知道，如果初始化的模块没有设置namespaced=true，那么子模块的getters，mutations和actions都是注册在全局命名空间的，因为此时的vuex源码内部会将所有的命名空间都处理成一个空字符串，即全局命名空间。
• 所以，从设计的角度分析，就是要对每个getter，mutation和action处理命名空间字符串。
• 看一下官方对有和没有设置namespaced的模块使用说明，我们就大致明白namespace处理了什么逻辑：

// 没有设置namespaced：
const store = new Vuex.Store({
   
  modules: {
   
    account: {
   
      state: () => ({
    ... }),
      getters: {
   
        isAdmin () {
    ... } // -> getters['isAdmin']
      },
      actions: {
   
        login () {
    ... } // -> dispatch('login')
      },
      mutations: {
   
        login () {
    ... } // -> commit('login')
      },
    }
  }
})
// 设置namespaced：
const store = new Vuex.Store({
   
  modules: {
   
    account: {
   
      namespaced: true,

      state: () => ({
    ... }),
      getters: {
   
        isAdmin () {
    ... } // -> getters['account/isAdmin']
      },
      actions: {
   
        login () {
    ... } // -> dispatch('account/login')
      },
      mutations: {
   
        login () {
    ... } // -> commit('account/login')
      },
    }
  }
})

• 上面的代码应该一看就知道，设置了命名空间的话，namespace就由之前的空字符串，变成了“account/”，即模块名+/。然后将其设置为子模块的每个getter，mutation和action的key。 另外肯定要处理嵌套子路由嘛，那无法就是一个遍历或者递归的处理逻辑。

模块初始化

• 有没有设置命名空间，模块的初始化都是一致的。将子模块以模块名-模块内容的字典结构赋值到父模块的_children中。

// ./module/module-collection.js
export default calss ModuleCollection {
   
    constructor (rawRootModule) {
   
        this.register([], rawRootModule, false)    
    }
    get(path) {
   
    	return path.reduce((module, key) => {
   
    		return module.getChild(key)
    	}, this.root)
    }
    register(path, rawModule, runtime=true) {
   
        ...
        if (path.length == 0) {
   
            this.root = rawModule        
        } else {
   
            const parent = this.get(path.slice(0, -1))
            parent.addChild(path[path.length-1], newModule)        
        }
    }