Vuex中的Module

Vuex的五大核心之一modules

modules，可以让每一个模块拥有自己的state、mutation、action、getters，使得结构非常清晰，方便管理；如果所有的状态或者方法都写在一个store里面，将会变得非常臃肿，难以维护。

使用流程

1.在手脚架中创建的store中新建一个文件夹，并创建js文件

2.在store的index.js文件下引入自己创建的js文件

做完这一步我们就可以在$store.state中看到我们创建的js文件了

3.内容编辑

js内容的编写按照官网的要求 state要使用箭头函数来表示

const state = ()=>({
    modaStr:'我是模块A的数据'
})
const getters = {
    strGetter:function(state){
        return state.modaStr+'getter'
    }
}
const mutations = {
    CHANGESTR:function(state,payload){
        state.modaStr = payload
    }
}
const actions = {
    waitStr({commit},data){
        setTimeout(() => {
            commit('CHANGESTR',data)
        }, 500);
       
    }
}

export default {
    /* 添加namespaced:true 是为了保证模块之间的数据独立运行，不互相影响 */
    namespaced:true,
    state:state,
    getters:getters,
    mutations:mutations,
    actions:actions
}

4.使用

我们希望通过方法去调用定义在modules分区的数据和方法同常规方式一样，不一样的是在方法前添加你引入的js文件名用 / 隔开

methods:{
    changeStr(){
      this.$store.commit('modB/CHANGESTR','111')
    },
    waitChange(){
      this.$store.dispatch('modB/waitStr','222')
    }
  }