// 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) {
                // 在這里調(diào)用 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'



//實(shí)例store對(duì)象
const store = new Vuex.Store({
	modules: {
		product,
		user
		// getters,
		// actions
	}
})

//導(dǎo)出store對(duì)象
export default store

const product = {
	actions: {
		callsetuserInfo(context,payload) {                
                // 通過(guò) 根節(jié)點(diǎn)狀態(tài) 去訪問(wèn) user 模塊的 userInfo信息
                console.log(context.rootState.user.userInfo)  // '鳴人'
		},
	}
}

export default product

// 三個(gè)參數(shù)： 1. 模塊/方法名 2.參數(shù) 3.是否從跟節(jié)點(diǎn)尋找
context.dispatch('需要調(diào)用的方法名',params,{root: true})

// 三個(gè)參數(shù)： 1. 模塊/方法名 2.參數(shù) 3.是否從跟節(jié)點(diǎn)尋找
context.commit('需要調(diào)用的方法名',params,{root: true})

const product = {
	actions: {
		callsetuserInfo(context,payload) {
                  // 因?yàn)槭悄J(rèn)為全局注冊(cè)  可以直接訪問(wèn) setuserInfo  
                  //  {root: true} 表明從根節(jié)點(diǎn)尋找  如果不加 則是從當(dāng)前模塊中
                  //  這里即 product模塊 去找 setuserInfo 方法 （當(dāng)然找不到）
           		contxt.dispatch('setuserInfo',{
				userInfo: '宇智波佐助'
			},{root: true})
		},
	}
}
export default product

...mapState({
    cartList: state => state.product.cartList,
    userInfo:state => state.user.userInfo,
}),
methods: {
    // 因?yàn)闉槟J(rèn)情況，Action全局注冊(cè)，這里使用輔助函數(shù)直接取值
 ...mapActions( [
   'callsetuserInfo',
 ]),

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

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

      // 模塊內(nèi)容（module assets）
      state: () => ({ ... }), // 模塊內(nèi)的狀態(tài)已經(jīng)是嵌套的了，使用 `namespaced` 屬性不會(huì)對(duì)其產(chǎn)生影響
      getters: {
        isAdmin () { ... } // -> getters['account/isAdmin']
      },
      actions: {
        login () { ... } // -> dispatch('account/login')
      },
      mutations: {
        login () { ... } // -> commit('account/login')
      },

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

        // 進(jìn)一步嵌套命名空間
        posts: {
          namespaced: true,

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

modules: {
  foo: {
    namespaced: true,

    getters: {
      // 在這個(gè)模塊的 getter 中，`getters` 被局部化了
      // 你可以使用 getter 的第四個(gè)參數(shù)來(lái)調(diào)用 `rootGetters`
      someGetter (state, getters, rootState, rootGetters) {
        getters.someOtherGetter // -> 'foo/someOtherGetter'
        rootGetters.someOtherGetter // -> 'someOtherGetter'
        rootGetters['bar/someOtherGetter'] // -> 'bar/someOtherGetter'
      },
      someOtherGetter: state => { ... }
    },

    actions: {
      // 在這個(gè)模塊中， dispatch 和 commit 也被局部化了
      // 他們可以接受 `root` 屬性以訪問(wèn)根 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,
     // 后續(xù)代碼
 }

const product = {
	actions: {
		callsetuserInfo(context,payload) {
                  // 因?yàn)殚_啟了命名空間  訪問(wèn)方法 需要通過(guò)模塊 user/setuserInfo  
           		context.dispatch('user/setuserInfo',{
				userInfo: '宇智波佐助'
			},{root: true})
		},
	}
}
export default product

 ...mapState({
    cartList: state => state.product.cartList,
    userInfo:state => state.user.userInfo,
}),
methods: {
    // 因?yàn)闉殚_啟命名空間  不能直接訪問(wèn)方法
    // 普通寫法
   ...mapActions([
   'product/callsetuserInfo',
 ]),  
    // 簡(jiǎn)化寫法：   將模塊的空間名稱字符串作為第一個(gè)參數(shù)傳遞
 ...mapActions('product',[
   'callsetuserInfo',
 ]),
 // 如果想調(diào)用多個(gè)不同命名空間的方法
  ...mapActions('模塊B',[
   '模塊B Function',
 ]),
async onLoad(params) {
    this.callsetuserInfo().then(()=> {
        // 打印user 模塊 的 userInfo
        console.log(this.userInfo) //  宇智波佐助 
    })
}