vuex梳理5 模块化modules 以及命名空间namespaced的使用

在vuex的使用中经常会根据不同业务模块，也将vuex内部按不同模块进行使用，每个模块中同样分为state,mutations,actions,getters这几个部分

import Vue from 'vue'
import Vuex from 'vuex'
import adv from "./adv"
import goods from "./goods"
import user from "./user"

Vue.use(Vuex)

export default new Vuex.Store({

    state: {
        father: "发泽"
    },
    mutations: {
        SET_TITLE() {
            console.log("father,lalalalala");
        },

    },
    getters: {
        sums() {
            return 5;
        }
    },
    // 模块，将你的store进行了模块化。
    modules: {
        adv, // 广告模块
        goods, // 商品模块
        user //用户模块
    }
})

默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的——这样使得多个模块能够对同一 mutation 或 action 作出响应。

所以在不使用命名空间的情况下，在组件中直接通过 commit，和dispatch，getters来调用即可，不用添加对应模块的名字

this.$store.dispatch('teaction')
this.$store.commit('TEST_MUA')
this.$store.getters.sumss

需要注意的是，如果不同模块action和mutation内的函数名相同时，会同时调用所以名称相同的函数，不同模块下getters的函数则不允许重名

state不受命名空间的影响使用时需要加模块名称

this.$store.state.goods.goodsTitle  // goods代表模块名称

使用命名空间时调用是要加模块名称，不加模块名则调用公共函数

this.$store.dispatch('adv/teaction')

　　this.$store.getters['adv/sumsss']

在使用了命名空间的module中，若需要在全局命名空间内分发 action 或提交 mutation，将 { root: true } 作为第三参数传给 dispatch 或 commit 即可。如果不加则默认调用当前模块内的函数

 

const actions = {
    teaction({
        dispatch,
        commit,
        getters,
        rootGetters
    }, params) {
        console.log('modal adv action', getters, rootGetters)
        commit('SET_TITLE', {}, {
            root: true
        })
    },
   
};

 

下面解释一下个参数的含义

在某一midule中

mutations: {
      
        TEST_MUA(state,) {
            // this.commit('adv/SET_TITLE', null, )
            console.log('modal goods mutations', state, this.state)
            this.dispatch('goodsavc')
　　　　　　　state代表当前模块中的state，this.state则表示整个store中的state
        }
    },
    actions: {
      
        goodsavc({
            commit,
　　　　　　　state
            rootState,
            rootGetters,
            getters
        }, params) {
            console.log('aaaaaaaaaaaaa', rootState, rootGetters, getters)
            
            this.dispatch('run')
           
        },
       state代表当前模块的state当然，不推荐在actions中直接修改state要同mutations进行操作
　　　　rootState中可以获取到整个store中不同模块的数据　
　　　　getters和rootGetters在不使用命名空间的情况下都代表store中所有的getters 
　　　　在使用命名空间时，getters代表当前模块getters，rootGetters代表store中所有getters


    },
    getters: {
        sumss(state, getter, rootState, rootGetters) {
            console.log('modal goods getters', getter, rootState, state, )
            return 3;
        },
        同上
    }