1、vuex深入理解modules、什么是module?背景：在Vue中State使用是單一狀態樹結構，應該的所有的狀態都放在state里面，如果項目比較復雜，那state是一個很大的對象，store對象也將對變得非常大，難于管理。module:可以讓每一個模塊擁有自己的state、mutation、action、getters，使得結構非常清晰，方便管理。二、怎么用module?一般結構constmoduleA=state:.,mutations:.,actions:.,getters:.constmoduleB=state:.,mutations:.,actions:.conststore=n

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

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

4、tactions=；constgetters=；/不要忘記把state,mutations等暴露出去。exportdefaultstate,mutations,actions,getters在src目錄下，再新建一個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根實例中。importVuefromvueimportAppfrom./App.vue/引入storeimportstorefrom./storenewVue(el:#app,store,/注入到根實例中。render:h=h(App)4,在app.vue中通過computed屬性獲取到login下的state.這里要注要注在沒有在沒有modU的情況下L況組件中通件中通過this.store.state.模塊名.屬性名，在這里是this.$store.state.login.userNameuseNameexportdefault/computed屬

6、性，從store中獲取狀態state,不要忘記login命名空間。computed:useName:function。returnthis.$store.state.login.useName組件中成功獲取到狀態。項目目錄和展示如下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中添加一個按鈕：changetojson,點擊時，dispatch個action.那在組件中怎么

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

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

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

11、ns中context對象，也會多了兩個屬性,context.getters,context.rootState,這些全局的默認參數，都排在局部參數的后面。我們在store.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、參數對象多了rootState參數changeName(commit,rootState,anotherName)if(rootState.job=web)commit(change_name,anotherName);constgetters=/getters獲取到rootState,rootGetters作為參數。/rootState和rootGetter參數順序不要寫反，一定是state在前，getter在后面，這是vuex的默認參數傳遞順序，可以打印出來看一下。localJobTitle(state,getters,rootState,rootGetters)consoleog(roo

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

14、eogin.useName),/mapGeter直接獲得全局注冊的gettersmapGetters(localJobTitle),methods:changeName()this.$store.dispatch(changeName,Jason)7,其實actions,mutations,getters,也可以限定在當前模塊的命名空間中。只要給我們的模塊加一個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:當所有的actions,mutations,getters都被限定到模塊的命名空間下，我們dispatchactions,commitmutations都需要用到命名空間。如dispacth(changeName),就要變成dispatch(login/changeName);getters.localJobTitle就要變成getterslogin/localJobTitleapp.vue如下:useNamelocalJobTitlechangetojsonimportmapActions,mapState,mapGettersfromvuex;ex

17、portdefault/computed屬性，從store中獲取狀態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函數也都有了一個參數，用于限定命名空間，每二個參數對象或數組中的屬性，都映射到了當前命名空間中。importmapActi