vuex modules

   export default new Vuex.Store({
      //存储数据
      state:{

      },
      //方法
      mutations:{

      },
      //计算属性
      getters:{

      },
      //异步方法,(如ajax)
      actions:{

      },
      //模块
      modules:{
		可以存放其他store
			格式为:
			
			(1)名称:{state:{xx},mutations:{xx},getters:{xx},actions:{xx}}
					其中:
						模块的actions.js函数中
							function({rootState}){xxx}  可以使用rootState访问根结点的state
						模块的getters.js函数中
							function({state, getters, rootState}){xxx}  第三个参使访问根节点的state
			若为mod文件
			(1)文件中export default{state:{xx},mutations:{xx},getters:{xx},actions:{xx}}
			
			在组件中调用:
			
		不使用命名空间(即模块还有一个属性:namespaced: true,)；

				第一种:
				state:	$store.state.模块名.键名
				getters:$store.getters('方法名')	
				actions:$store.dispatch('方法名')
				mutations:$store.commit('方法名')
				
				(1)引入辅助函数
				 import {mapState,mapActions,mapGetters,mapMutations} from 'vuex'
				获取模块内的
				state:computed:{...mapState(['模块名'])}; 模块名.键名调用
					或者采用带有命名空间的state写法
				getters:computed:{...mapGetters(['函数名',...])}
				mutations:methods:{...mapMutations(['函数名',...])}
				actions:methods:{...mapActions(['函数名',...])}
				
		使用命名空间(即模块还有一个属性:namespaced: true,)；
			方式一:	
				调用基础上加上当前模块名
				 	如调用mutations:this.$store.commit('当前模块名/方法名')
				
				辅助函数
				getters:computed:{...mapGetters('模块名',['模块的函数名',...])}
				mutations:methods:{...mapMutations('模块名',['函数名',...])}
				actions:methods:{...mapActions('模块名',['函数名',...])}
				state:computed:{...mapState({
					模块中的state属性名:state=>state.模块名.state属性名	
				})}; 
			
			方式二:
				import { createNamespacedHelpers } from 'vuex'
				const { mapState, mapActions,xx } = createNamespacedHelpers('模块名')
				
				辅助函数
				getters:computed:{...mapGetters(['模块的函数名',...])}
				mutations:methods:{...mapMutations(['函数名',...])}
				actions:methods:{...mapActions(['函数名',...])}
				state:computed:{...mapState(['属性名'])}
      }
    })

代码示例:
store:

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import getters from './getters'
import mutations from './mutations'
import actions from './actions'
import mod1 from './mod1'

Vue.use(Vuex);

//仓库对象,存放多组件共用数据
export default new Vuex.Store({
  //data
  state:state,
  //methods,尽量在这里处理state中的状态
  mutations:mutations,
  //计算属性
  getters:getters,
  //异步方法(如ajax)
  actions:actions,
  //模块
  modules:{
    mod1
  }
})

mod1:

export default{
  state:{
    productNum:10
  },
  getters:{
    brief:function(state){
      return state.productNum+'件衣服';
    }
  },
  actions:{

    changeProNum(content){
      setTimeout(()=>{
        content.commit('addProNum');
      },1000)
     }
  },
  mutations:{
    addProNum(state){
      return state.productNum++;
    }
  }
}

组件:

<template>
  <div>

  <h1>{{$store.state.mod1.productNum}}</h1>
  <h2>{{mod1.productNum}}</h2>
   <h3>{{brief}}</h3>
    <h4>{{addProNum}}</h4>
  <button @click='changeProNum'>点击获取</button>
  </div>
</template>

<script>
  import {mapState,mapActions,mapGetters,mapMutations} from 'vuex'
  //获取模块state内容
  let mapStateObj=mapState(['mod1'])
  //获取模块getters内容
  let mapGettersObj=mapGetters(['brief'])
  let mapMutationsObj=mapMutations(['addProNum'])

  let mapActionsObj=mapActions(['changeProNum']);
  export default{
    name:'A',
    data()
    {
      return{
         count:0
      }
    },
    methods:{

    },
    computed:{
        ...mapStateObj,
        ...mapGettersObj,
        ...mapMutationsObj,
    },
    mounted()
    {
      console.log(this);
    },
    methods:{
      ...mapActionsObj
    }
  }
</script>

<style>
</style>