vuex 原始碼分析(七) module和namespaced 詳解-有解無憂

當專案非常大時，如果所有的狀態都集中放到一個物件中，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/[email protected]/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，然后渲染如下:

點擊測驗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/[email protected]/dist/vue.js"></script>
    <script src="https://unpkg.com/[email protected]/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/[email protected]/dist/vue.js"></script>
    <script src="https://unpkg.com/[email protected]/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>

渲染如下:

這里雖然子倉庫和根倉庫都定義了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);        //則遞回呼叫自身
    });
  }

這樣就完成模塊的安裝了，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/41320.html

標籤：HTML5

上一篇：Saying goodbye to Flash in Chrome一代人的回憶FLASH

下一篇：移動端橫豎屏檢測