记录贴：vuex之modules

当vuex中代码过多时，如果只写一个文件夹中太过臃肿，单独对state，mutations等拆分太过麻烦，这就用到了moudules,

    state:{
          list:[],
          article:[] 
      },
      mutations:{
        getList(state,data){
            state.list=data.category 
            state.article=data.hotblogs[0]
        }
      },
      actions:{
        async submit({commit}){
          let {data}=await axios.get('/storeData.json')             
            commit('getList',data) //提交mutations中方法
                            //请求到的数据传给getList()中的data
        }
      },
      modules:{
            user:{
                state:{},
                mutations:{},
                getters:{},
                actions:{}
            }
      }

由于user为对象，此时就可以将modules中的user写在另一个文件中，进行拆分。创建user和order文件，导出，在vuex主体导入使用如下：

import user from './user';
import order from './order';
 modules:{
            user,
            order
      }

在user.js文件中的state定义age:20

  state:{
       age:20
    },

组件中调用moudules的这个数据要多点一层 {{$store.state.user.age}}

但modules中action,mutations和getters是注册在全局命名空间的，所以调用他们时还像以前一样，不用像state一样多点一层

当然用mapState映射时方式也变了,也是多套一层，不过通过{{age}获取值时，要先使user这个vux的JS文件成为带命名空间的私有模块，否则mapStat会报错说找不到他的命名空间

  computed: {
        ...mapState('user',['age'])
    },

即

export default {
    namespaced:true,
    state:{
       age:20
    },
    mutations:{},
    getters:{},
    actions:{}
}

这样再通过{{age}获取数据就不会报错了

不过有了命名空间action,mutations和getters用mapMutations等映射也要多套以层

 methods: {
        ...mapMutations('user',['vuex中Mutations下的方法名'])
    },

如不用mapActions映射写法：this.$store.commit('user/Mutations下的方法名')
当然我的list,article,getList()那整个对象也可以建个js文件给个命名空间放入modules中

但一直多套一层也很麻烦，vue提供了一个方法

import { createNamespacedHelpers } from 'vuex'
let { mapState, mapActions } = createNamespacedHelpers('user')

这样之后写的时候就和原来一样，不用多套一层了

computed: {
        ...mapState(['age'])
    },