欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vuex 源码分析(七) module和namespaced 详解

程序员文章站 2022-05-18 20:50:10
当项目非常大时,如果所有的状态都集中放到一个对象中,store 对象就有可能变得相当臃肿。 为了解决这个问题,Vuex允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。 n ......

当项目非常大时,如果所有的状态都集中放到一个对象中,store 对象就有可能变得相当臃肿。

为了解决这个问题,vuex允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。

namespaced表示当前模块是否使用命名空间,如果使用的话,那么设置了namespaced属性的模块将和其它模块独立开来,调用时得指定命名空间后才可以访问得到

例如:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script src="./vuex.js"></script>
</head>
<body>

    <div id="app">
          <p>count:{{count}}</p>
          <p>acount:{{acount}}</p>
          <button @click="test1">测试1</button>
          <button @click="test2">测试2</button>            
    </div>
    <script>
            const modulea ={                                //子仓库a
                state:{count:0},
                mutations:{aincrement(state){state.count++}},
                actions:{aincrement(context){context.commit('aincrement')}}
            }

            const store = new vuex.store({                  //创建store实例          
                modules:{a:modulea},
                state:{count:1},
                mutations:{increment(state){state.count++}},
                actions:{increment(context){context.commit('increment')}}           
            })

            new vue({                                       //创建vue实例
                el:"#app",
                store,                                          //把实例化后的store作为new vue的一个参数
                computed:{
                    ...vuex.mapstate(['count']),                            
                    ...vuex.mapstate({acount:state=>state.a.count})            
                },
                methods:{
                    ...vuex.mapactions(['increment','aincrement']),
                    test1(){
                        this.increment();
                    },
                    test2(){
                        this.aincrement();
                    }
                }
            })
    </script>
</body>
</html>

我们在根仓库定义了count状态,在子仓库a也定义了一个count,然后渲染如下:

vuex 源码分析(七) module和namespaced 详解

点击测试1按钮将触发根仓库的increment这个action,点击按钮2将触发子仓库a的aincrement这个action,分别给当前仓库的count递增1

像上面例子里区分的子module,它的mutations和actions都是和根仓库的等级是一样的,如果子仓库和根仓库的mutation或者action重名了,那么就会合并为一个数字,当触发时都会执行,例如:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script src="https://unpkg.com/vuex@3.1.0/dist/vuex.js"></script>
</head>
<body>
    <div id="app">
        <p>root.no:{{no}}</p>
        <p>amodule.no:{{ano}}</p>
        <button @click="test">测试1</button>
    </div>
    <script>
        const store = new vuex.store({
            state:{no:100},
            mutations:{
                        increment(state,no){state.no+=no;}
                    },
            modules:{
                a:{
                    state:{no:50},
                    mutations:{
                        increment(state,no){state.no+=100;}
                    }
                }
            }
        })
        var app = new vue({
            store,
            computed:{
                ...vuex.mapstate({no:state=>state.no,ano:state=>state.a.no})
            },
            methods:{
                ...vuex.mapmutations(['increment']),
                test(){
                    this.increment(10);
                }
            },
            el:'#app'
        })  
    </script>    
</body>
</html>

我们点击测试1按钮时将触发根仓库和子仓库a的increment这个mutation,此时页面会将两个对应的no都分别进行更新,这样是不符合逻辑的,最好每个仓库都互不干扰

writer by:大沙漠 qq:22969969

我们可以给子仓库定义一个namespaced属性,值为true,表示开启命名空间,这样,各个仓库间的mutation、getter就不会有冲突了,例如:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script src="https://unpkg.com/vuex@3.1.0/dist/vuex.js"></script>
</head>
<body>
    <div id="app">
        <p>root.no:{{no}}</p>
        <p>amodule.no:{{ano}}</p>
        <button @click="test1">测试1</button>
        <button @click="test2">测试2</button>
    </div>
    <script>
        const store = new vuex.store({
            state:{no:100},
            mutations:{
                increment(state,no){state.no+=no;}
            },
            modules:{
                a:{
                    namespaced:true,
                    state:{no:50},
                    mutations:{
                        increment(state,no){state.no+=no;}
                    }
                }
            }
        })
        var app = new vue({
            el:'#app',
            store,
            computed:{
                ...vuex.mapstate({no:state=>state.no,ano:state=>state.a.no})
            },
            methods:{
                ...vuex.mapmutations(['increment']),
                ...vuex.mapmutations('a',{incrementa:'increment'}),

                test1(){
                    this.increment(10);
                },
                test2(){
        
                    this.incrementa(100);
                }
            }           
        })  
    </script>
</body>
</html>

渲染如下:

vuex 源码分析(七) module和namespaced 详解

这里虽然子仓库和根仓库都定义了increment,但是因为子仓库定义了namespaced,所以两个并不会起冲突,namespaced的作用就是将mutation和action和其它模块区分开来,引用时需要指定命名空间才可以

 

 源码分析


 module的收集是在vuex.store()实例化时执行modulecollection.register()时完成的,如下:

modulecollection.prototype.register = function register (path, rawmodule, runtime) {    //收集模块 
  /*略*/   

  // register nested modules
  if (rawmodule.modules) {                                                                //如果rawmodule.modules存在(含有子仓库)
    foreachvalue(rawmodule.modules, function (rawchildmodule, key) {
      this$1.register(path.concat(key), rawchildmodule, runtime);                         //递归调用register()注册子仓库
    });
  }
};

这样就完成了模块的收集,安装模块时也会对子模块进行判断,如下:

  function installmodule (store, rootstate, path, module, hot) {        //安装模块
    /*略*/
    module.foreachchild(function (child, key) {                           //如果有子模版
      installmodule(store, rootstate, path.concat(key), child, hot);        //则递归调用自身
    });
  }

这样就完成模块的安装了。