什么是module？

背景：在Vue中State使用是單一狀態(tài)樹(shù)結(jié)構(gòu)，應(yīng)該的所有的狀態(tài)都放在state里面，如果項(xiàng)目比較復(fù)雜，那state是一個(gè)很大的對(duì)象，store對(duì)象也將對(duì)變得非常大，難于管理。

module：可以讓每一個(gè)模塊擁有自己的state、mutation、action、getters,使得結(jié)構(gòu)非常清晰，方便管理。

怎么用module？

一般結(jié)構(gòu)

const moduleA = { state: { ... }, mutations: { ... }, actions: { ... }, getters: { ... } }const moduleB = { state: { ... }, mutations: { ... }, actions: { ... } }const store = new Vuex.Store({ modules: {  a: moduleA,  b: moduleB})

模塊內(nèi)部的數(shù)據(jù)：①內(nèi)部state，模塊內(nèi)部的state是局部的，也就是模塊私有的，比如是car.js模塊state中的list數(shù)據(jù)，我們要通過(guò)this.$store.state.car.list獲取；②內(nèi)部getter、mutation和action，仍然注冊(cè)在全局命名空間內(nèi)，這是為了多模塊可以同時(shí)響應(yīng)同一mutation；this.$store.state.car.carGetter的結(jié)結(jié)果是undefined，而通過(guò)this.$store.state.carGetter則可以拿到。

傳參：getters====({state(局部狀態(tài)),getters（全局getters對(duì)象）,roosState（根狀態(tài)）})；actions====({state(局部狀態(tài)),commit,roosState（根狀態(tài)）}).

新建一個(gè)項(xiàng)目體驗(yàn)一下，通過(guò)vue