When the project is very large, if all the states are concentrated in one object, the thermal planet software development (T: I8O-285I-O282 V forest) store object may become quite bloated.
To solve this problem, Vuex allows us to divide the store into modules. Each module has its own state, mutation, action, getter, and even nested submodules - split in the same way from top to bottom.
Namespace indicates whether the current module uses a namespace. If it is used, the module with the namespace attribute set will be independent of other modules. When calling, you need to specify a namespace before you can access it.
For example:
Copy code
<!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">Test 1</button>
<button @click="test2">Test 2</button>
</div>
<script>
const moduleA ={ //Sub warehouse a
state:{count:0},
mutations:{Aincrement(state){state.count++}},
actions:{Aincrement(context){context.commit('Aincrement')}}
}
const store = new Vuex.Store({ //Create Store instance
modules:{A:moduleA},
state:{count:1},
mutations:{increment(state){state.count++}},
actions:{increment(context){context.commit('increment')}}
})
new Vue({ //Create Vue instance
el:"#app",
store, //Take the instantiated store as a parameter of 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>
Copy code