Vuex（篇5-1）——modules中state

为甚么使用模块？

• vues使用单一状态树，意味着很多状态都会交给Vuex来管理
• 当应用变的非常复杂时，Store对象就可能变的相当臃肿
• 为解决这个问题，Vuex允许我们将store分割成模块(Module)，并且每个模块拥有自己的State、Mutation、Actions、Getters等

对于模块内部的 mutation 和 getter，接收的第一个参数是模块的局部状态对象。

模块A

const state={   
	 count:1,    
	 hername:'JOHU'}
 const mutations={    
	 add (state){//state是局部的        
 	state.count++;   
  }}
  const actions={}
  const getters={    
 	 Aname (state) {        
 		 return 'moduleA'+state.count.toString()    
  }}
  export default {    
 	 namespaced:true,    
 	 state,    
 	 mutations,   
  	 actions,   
   	 getters
    }

模块B

export default{   
  namespaced: true,    
  state:{        
 	count:4,       
  	hisname:'ModubleB'   
   },   
  mutations:{        
    add (state){            
      state.count++;       
    }    
  },   
  getters:{        
      Bname (state) {           
       return 'Aname'+state.hisname.toString()        
       }    
}}

全局index.js

import Vue from 'vue'
import Vuex from 'vuex'
import moduleA from '@/vuex/module/modulea.js'
import moduleB from '@/vuex/module/moduleb.js'
Vue.use(Vuex)
const store = new Vuex.Store({   
state:{ 
      count:10,
 },  
 mutations:{ 
    add (state){        
    state.count++;    }   },   
 getters:{
        theirname(state){
            return 'them'+state.count.toString()       
           }
  },
  actions:{},   
 modules: {
        a:moduleA,       
        b:moduleB   
   }
   })
 export default store

组件中使用vuex中模块的state

方法1：直接使用属性this.$store.state

<p>moduleB中的：{{this.$store.state.moduleB.count}}</p>
<p>moduleA中的：{{this.$store.state.moduleA.count}}</p>
<p>全局中的：{{this.$store.state.count}}</p>
//当模块使用别名时
<p>moduleB中的：{{this.$store.state.b.count}}</p>
<p>moduleA中的：{{this.$store.state.a.count}}</p>
<p>全局中的：{{this.$store.state.count}}</p>

方法2：使用mapState辅助函数，映射到computed

 ...mapState({
            countA:state => state.a.count,
            countB:state => state.b.count,
            count: state => state.count
        })     
    <ul>
          <li>{{countA}}</li>
          <li>{{countB}}</li>
          <li>{{count}}</li>
      </ul>