vuex模块化

1. vuex中modules可以将项目state进行分块，互补干扰。
2. 那么在单个module中，action如何调用其他module中action或者根action/mutation/state？

打印action参数：

const actions={
  editName(options,payload){
    console.log(options)
  }
}

运行editName方法，打印结果：

1. commit 用于调用mutation，当前模块和其他模块；
2. dispatch 用于调用action，当前模块和其他模块；
3. getters 用于获取当前模块getter；
4. state 用于获取当前模块state；
5. rootState 用于获取其它模块state；
6. rootGetters 用于获取其他模块getter；

rootGetters 可以得到，根getters与其他模块getters：Home命名空间下的word

const actions={
  editName({rootGetters},payload){
    console.log(rootGetters)
  }
}

运行editName:

rootState 得到根state下time值以及其它module下的state。

const actions={
  editName({rootState},payload){
    console.log(rootState)
  }
}

运行editName,结果：

得到根state下time值以及其它module下的state。

getters 只会得到当前模块下getters

const getters={
  word:state=>`My name is ${state.username}`
}

const actions={
  editName({getters},payload){
    console.log(getters)
  }
}

运行editName，结果：

state 只会得到当前模块下state

const state={
  username:'wbiokr',
  sex:'man'
}
const actions={
  editName({state},payload){
    console.log(state)
  }
}

dispatch 用于调用action，当前模块和其他模块；

const actions={
  editName({dispatch},payload){
    dispatch('log')
  },
  log(){
    console.log(123)
  }
}

此时运行editName，会运行当前模块下log方法，故结果打印出123。
如果在根空间下定义一个log方法，通过dispatch去调用，则可以通过root参数：

const actions={
  editName({dispatch},payload){
    dispatch('log',{txt:'hello world'},{root:true})
  },
  log(){
    console.log(123)
  }
}

//根空间

actions:{
    log({},{txt}){
      console.log(txt)
    }
 }

此时运行editName方法适合，则打印出hello world；

commit commit 用于调用mutation，当前模块和其他模块；

commit回去触发mutation更新state，如：

const state={
  username:'wbiokr',
  sex:'man'
}

const actions={
  editName({commit,state},payload){
    commit('editName','newName')
    console.log(state)
  }
}

如果想触发其他模块的mutation动态更新state，则需要借助参数root：

根模块index.js

import Home from './modules/home' 
import About from './modules/about' 

export default {
  modules:{
    Home,
    About,
  },
  state:{
    time:new Date().getTime()
  },
  getters:{
    getFullYear:state=> new Date(state.time).getFullYear()

  },
  mutations:{
    updateTime(state,payload){
      state.time=payload.time
    }
  },
  actions:{
    updateTime({commit},payload){
      commit('updateTime',payload)
    },
    log({},{txt}){
      console.log(txt)
    }
  },
}

模块about.js

const state={
  componey:'one',
}

const mutations={
  changeComponey(state,n){
    state.componey=n
  }
}

const actions={
  editName(options,payload){
    console.log(options)
  }
}

export default {
  namespaced:true,
  state,
  mutations,
  actions,
}

模块home.js

const state={
  username:'wbiokr',
  sex:'man'
}

const getters={
  word:state=>`My name is ${state.username}`
}

const mutations={
  editName(state,n){
    state.username=n
  }
}

const actions={
  editName({commit,rootState},payload){
    commit('About/changeComponey','newComponey',{root:true}) //此处是重点
    console.log(rootState.About)
  }
}

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