1、vuex深入理解modules、什么是module?背景：在Vue中State使用是單一狀態(tài)樹結(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)constmoduleA=state:.,mutations:.,actions:.,getters:.constmoduleB=state:.,mutations:.,actions:.conststore=n

2、ewVuex.Store(modules:a:moduleA,b:moduleB)模塊內(nèi)部的數(shù)據(jù)：內(nèi)部state,模塊內(nèi)部的state是局部的，也就是模塊私有的，比如是carjs模塊state中的list數(shù)據(jù)，我們要通過this.Istore.state.car.carGetter的結(jié)結(jié)果是undefined，而通過this.$store.state.carGetter則可以拿到。傳參：getters=（state（局部狀態(tài)）,getters（全局getters對(duì)象），roosState（根狀態(tài)）;actions=（state（局部狀態(tài)）,commit,roosState（根狀態(tài)）.三、新建一

3、個(gè)項(xiàng)目體驗(yàn)一下，通過vue-cli新建一個(gè)項(xiàng)目，不要忘記安裝vuex,cnpminstallvuex-save不了解的童鞋可以看我的-深入理解vue腳手架vue-cli文章這里詳細(xì)介紹了新建vue-cli項(xiàng)目ps:想了解更多vuex相關(guān)知識(shí)請(qǐng)點(diǎn)擊vuex官網(wǎng)在src目錄下新一個(gè)login文件夾，在里面新建indexjs用于存放login模塊的狀態(tài)。為了簡單起見，我把模塊下的state,actions,mutations,getters全放在indexjs文件中。先簡單給它增加一個(gè)狀態(tài)，userName:samconststate=useName:sam；constmutations=；cons

4、tactions=；constgetters=；/不要忘記把state,mutations等暴露出去。exportdefaultstate,mutations,actions,getters在src目錄下，再新建一個(gè)store.js這是根store,它通過modules屬性引入login模塊。importVuefromvue;importVuexfromvuex;Vue.use(Vuex);/引入login模塊importloginfrom./loginexportdefaultnewVuex.Store(/通過modules屬性引入Iogin模塊。modules:login:login)在m

5、ain.js中引入store,并注入到vue根實(shí)例中。importVuefromvueimportAppfrom./App.vue/引入storeimportstorefrom./storenewVue(el:#app,store,/注入到根實(shí)例中。render:h=h(App)4,在app.vue中通過computed屬性獲取到login下的state.這里要注要注在沒有在沒有modU的情況下L況組件中通件中通過this.store.state.模塊名.屬性名，在這里是this.$store.state.login.userNameuseNameexportdefault/computed屬

6、性，從store中獲取狀態(tài)state,不要忘記login命名空間。computed:useName:function。returnthis.$store.state.login.useName組件中成功獲取到狀態(tài)。項(xiàng)目目錄和展示如下V=vuienriOLJidlieni0de_irodluilesT=泣許assets曹=loginindjsgitignore*ndexh:ml.pp.irueruainjistcrejibabelrcDactage.jsonREADME,md,Af?tpack.config._ssam5,通過actions,mutations改變名字,這就涉及到dispatch

7、Action,commitmutations,mutations改變state.先在login文件夾indexjs中添加changeNameaction和change_namemutations.constmutations=change_name(state,anotherName)state.useName=anotherName;constactions=changeName(commit,anotherName)commit(change_name,anotherName);在app.vue中添加一個(gè)按鈕：changetojson,點(diǎn)擊時(shí)，dispatch個(gè)action.那在組件中怎么

8、dispatchactions呢？在模塊中，state是被限制到模塊的命名空間下，需要命名空間才能訪問。但actions和mutations,其實(shí)還有g(shù)etters卻沒有被限制，在默認(rèn)情況下，它們是注冊(cè)到全局命名空間下的，所謂的注冊(cè)到全局命名空間下，其實(shí)就是我們?cè)L問它們的方式和原來沒有module的時(shí)候是一樣的。比如沒有module的時(shí)候，this.store.dispatch(changeName),組件中的getters,也是通過this.$store.getters.module中g(shù)etters來獲取。useNamechangetojsonexportdefault/computed屬性

9、，從store中獲取狀態(tài)state，不要忘記login命名空間。computed:useName:function。returnthis.$store.state.login.useName,methods:/和沒有modules的時(shí)候一樣，同樣的方式dispatchactionchangeName()this.$store.dispatch(changeName,Jason)6,局部參數(shù)雖然dispatchaction和commitmutations可以全局使用，但是寫在module中的actions,mutations和getters,它們獲得的默認(rèn)參數(shù)卻不是全局的，都是局部的，被限定在它

10、們所在的模塊中的。比如mutations和getters會(huì)獲得state作為第一個(gè)默認(rèn)參數(shù)，這個(gè)state參數(shù)，就是限定在mutations和getters所在模塊的state對(duì)象，login文件夾下的mutations和getters只會(huì)獲取到當(dāng)前indexjs中的state作為參數(shù)。actions會(huì)獲得一個(gè)context對(duì)象作為參數(shù)，這個(gè)context對(duì)象就是當(dāng)前module的實(shí)例，module相當(dāng)于一個(gè)小store.那么怎樣才能獲取到根store中的state和getters呢？Vuex提供了rootState,rootGetters作為module中g(shù)etters中默認(rèn)參數(shù),actio

11、ns中context對(duì)象，也會(huì)多了兩個(gè)屬性,context.getters,context.rootState,這些全局的默認(rèn)參數(shù)，都排在局部參數(shù)的后面。我們?cè)趕tore.js中添加state,getters:exportdefaultnewVuex.Store(/通過modules屬性引入Iogin模塊。modules:login:login,/新增state,gettersstate:job:web,getters:jobTitle(state)returnstate.job+developer)login目錄下的index.jsconstactions=/actions中的context

12、參數(shù)對(duì)象多了rootState參數(shù)changeName(commit,rootState,anotherName)if(rootState.job=web)commit(change_name,anotherName);constgetters=/getters獲取到rootState,rootGetters作為參數(shù)。/rootState和rootGetter參數(shù)順序不要寫反，一定是state在前，getter在后面，這是vuex的默認(rèn)參數(shù)傳遞順序，可以打印出來看一下。localJobTitle(state,getters,rootState,rootGetters)consoleog(roo

13、tState);consoleog(rootGetters);returnrootGetters.jobTitle+aka+rootState.job;:JSapp.vue增加h2展示loacaJobTitle,這個(gè)同時(shí)證明了getters也是被注冊(cè)到全局中的。useNamelocalJobTitlechangetojsonimportmapActions,mapState,mapGettersfromvuex;exportdefault/computed屬性，從store中獲取狀態(tài)state,不要忘記login命名空間。computed:mapState(useName:state=stat

14、eogin.useName),/mapGeter直接獲得全局注冊(cè)的gettersmapGetters(localJobTitle),methods:changeName()this.$store.dispatch(changeName,Jason)7,其實(shí)actions,mutations,getters,也可以限定在當(dāng)前模塊的命名空間中。只要給我們的模塊加一個(gè)namespaced屬性：conststate=useName:sam；constmutations=change_name(state,anotherName)state.useName=anotherName;constaction

15、s=changeName(commit,rootState,anotherName)if(rootState.job=web)commit(change_name,anotherName),alertName(state)alert(state.useName);constgetters=localJobTitle(state,getters,rootState,rootGetters)returnrootGetters.jobTitle+aka+rootState.job;/namespaced屬性，限定命名空間exportdefaultnamespaced:true,state,mutat

16、ions,actions,getters:當(dāng)所有的actions,mutations,getters都被限定到模塊的命名空間下，我們dispatchactions,commitmutations都需要用到命名空間。如dispacth(changeName),就要變成dispatch(login/changeName);getters.localJobTitle就要變成getterslogin/localJobTitleapp.vue如下:useNamelocalJobTitlechangetojsonimportmapActions,mapState,mapGettersfromvuex;ex

17、portdefault/computed屬性，從store中獲取狀態(tài)state,不要忘記login命名空間。computed:.mapState(login,useName:state=state.useName),localJobTitle()returnthis.$store.getterslogin/localJobTitle,methods:changeName()this.$store.dispatch(login/changeName,Jason),alertName()this.$store.dispatch(login/alertName)有了命名空間之后，mapState,mapGetters,mapActions函數(shù)也都有了一個(gè)參數(shù)，用于限定命名空間，每二個(gè)參數(shù)對(duì)象或數(shù)組中的屬性，都映射到了當(dāng)前命名空間中。importmapActi