Vuex模块化用法 跨模块调用的方式

// module user 模块
const user = {
	state: {
		userInfo: '鸣人', // 用户信息
	},
	mutations:{
		SET_UserInfo(state,payload) {
			state.userInfo = payload.userInfo
		},
	},
	actions: {
		setuserInfo(context,payload) {
			return new Promise(resolve => {
				context.commit('SET_UserInfo',payload)
				resolve();
			})
		},
	}
}

export default user

const product = {
	actions: {
		callsetuserInfo(context,payload) {
                // 在这里调用 user 模块的 setuserInfo 方法
		},
	}
}

export default product

import Vue from 'vue'
//引用Vuex
import Vuex from 'vuex'
Vue.use(Vuex)

import product from '@/store/modules/product'
import user from '@/store/modules/user'
// import  getters from '@/store/modules/getters.js'
// import  actions from '@/store/modules/actions.js'



//实例store对象
const store = new Vuex.Store({
	modules: {
		product,
		user
		// getters,
		// actions
	}
})

//导出store对象
export default store

const product = {
	actions: {
		callsetuserInfo(context,payload) {                
                // 通过 根节点状态 去访问 user 模块的 userInfo信息
                console.log(context.rootState.user.userInfo)  // '鸣人'
		},
	}
}

export default product

// 三个参数： 1. 模块/方法名 2.参数 3.是否从跟节点寻找
context.dispatch('需要调用的方法名',params,{root: true})

// 三个参数： 1. 模块/方法名 2.参数 3.是否从跟节点寻找
context.commit('需要调用的方法名',params,{root: true})

const product = {
	actions: {
		callsetuserInfo(context,payload) {
                  // 因为是默认为全局注册  可以直接访问 setuserInfo  
                  //  {root: true} 表明从根节点寻找  如果不加 则是从当前模块中
                  //  这里即 product模块 去找 setuserInfo 方法 （当然找不到）
           		contxt.dispatch('setuserInfo',{
				userInfo: '宇智波佐助'
			},{root: true})
		},
	}
}
export default product

...mapState({
    cartList: state => state.product.cartList,
    userInfo:state => state.user.userInfo,
}),
methods: {
    // 因为为默认情况，Action全局注册，这里使用辅助函数直接取值
 ...mapActions( [
   'callsetuserInfo',
 ]),

async onLoad(params) {
    this.callsetuserInfo().then(()=> {
        // 打印user 模块 的 userInfo
        console.log(this.userInfo) //  宇智波佐助 
    })
}

const store = createStore({
  modules: {
    account: {
      namespaced: true,

      // 模块内容（module assets）
      state: () => ({ ... }), // 模块内的状态已经是嵌套的了，使用 `namespaced` 属性不会对其产生影响
      getters: {
        isAdmin () { ... } // -> getters['account/isAdmin']
      },
      actions: {
        login () { ... } // -> dispatch('account/login')
      },
      mutations: {
        login () { ... } // -> commit('account/login')
      },

      // 嵌套模块
      modules: {
        // 继承父模块的命名空间
        myPage: {
          state: () => ({ ... }),
          getters: {
            profile () { ... } // -> getters['account/profile']
          }
        },

        // 进一步嵌套命名空间
        posts: {
          namespaced: true,

          state: () => ({ ... }),
          getters: {
            popular () { ... } // -> getters['account/posts/popular']
          }
        }
      }
    }
  }
})

modules: {
  foo: {
    namespaced: true,

    getters: {
      // 在这个模块的 getter 中，`getters` 被局部化了
      // 你可以使用 getter 的第四个参数来调用 `rootGetters`
      someGetter (state, getters, rootState, rootGetters) {
        getters.someOtherGetter // -> 'foo/someOtherGetter'
        rootGetters.someOtherGetter // -> 'someOtherGetter'
        rootGetters['bar/someOtherGetter'] // -> 'bar/someOtherGetter'
      },
      someOtherGetter: state => { ... }
    },

    actions: {
      // 在这个模块中， dispatch 和 commit 也被局部化了
      // 他们可以接受 `root` 属性以访问根 dispatch 或 commit
      someAction ({ dispatch, commit, getters, rootGetters }) {
        getters.someGetter // -> 'foo/someGetter'
        rootGetters.someGetter // -> 'someGetter'
        rootGetters['bar/someGetter'] // -> 'bar/someGetter'

        dispatch('someOtherAction') // -> 'foo/someOtherAction'
        dispatch('someOtherAction', null, { root: true }) // -> 'someOtherAction'

        commit('someMutation') // -> 'foo/someMutation'
        commit('someMutation', null, { root: true }) // -> 'someMutation'
      },
      someOtherAction (ctx, payload) { ... }
    }
  }
}

const user = {
	namespaced: true,
     // 后续代码
 }

const product = {
	actions: {
		callsetuserInfo(context,payload) {
                  // 因为开启了命名空间  访问方法 需要通过模块 user/setuserInfo  
           		context.dispatch('user/setuserInfo',{
				userInfo: '宇智波佐助'
			},{root: true})
		},
	}
}
export default product

 ...mapState({
    cartList: state => state.product.cartList,
    userInfo:state => state.user.userInfo,
}),
methods: {
    // 因为为开启命名空间  不能直接访问方法
    // 普通写法
   ...mapActions([
   'product/callsetuserInfo',
 ]),  
    // 简化写法：   将模块的空间名称字符串作为第一个参数传递
 ...mapActions('product',[
   'callsetuserInfo',
 ]),
 // 如果想调用多个不同命名空间的方法
  ...mapActions('模块B',[
   '模块B Function',
 ]),
async onLoad(params) {
    this.callsetuserInfo().then(()=> {
        // 打印user 模块 的 userInfo
        console.log(this.userInfo) //  宇智波佐助 
    })
}