Vuex初始化单个模块state时如何访问另一模块的state属性

原理说明 #

Vuex 模块的静态 state 是在模块导入阶段就作为普通JS对象生成的，此时Store实例还未完成初始化，不存在rootState上下文，因此无法直接在B模块的静态state声明中访问A模块的state值。

注意：所有方案都避免了在静态state声明阶段访问未初始化的store上下文，符合Vuex的初始化执行逻辑。

可选解决方案 #

方案1：抽离公共常量（最推荐，适合初始值固定的场景） #

把A模块的初始公共值抽成单独的常量文件，两个模块都引入该常量即可：

1. 新建constants.js

// constants.js
export const A_INIT_X = 5

2. 修改A模块：

// A.js
import { A_INIT_X } from './constants'
export default {
  state: {
    x: A_INIT_X
  }
}

3. 修改B模块：

// B.js
import { A_INIT_X } from './constants'
export default {
  state: {
    foo: 3 + A_INIT_X // 直接得到预期值8
  }
}

方案2：动态注册B模块 #

如果A的x初始值可能包含动态逻辑，不能抽成静态常量，可以先注册A模块，拿到A的state值后再动态注册B模块：

1. 修改B模块为可接收参数的工厂函数：

// B.js
export default (aX) => ({
  state: {
    foo: 3 + aX
  }
})

2. 修改store入口的注册逻辑：

// index.js
import moduleA from './modules/A'
import createModuleB from './modules/B'
import Vuex from 'vuex'

// 先初始化带A模块的store
const store = new Vuex.Store({
  modules: {
    A: moduleA
  }
})
// 拿到A的x值生成B模块，再动态注册
const moduleB = createModuleB(store.state.A.x)
store.registerModule('B', moduleB)

方案3：初始化完成后通过mutation赋值 #

如果不想调整模块注册逻辑，可以先给B的foo设占位值，等store实例化完成后主动触发mutation赋值：

1. 修改B模块，新增初始化mutation：

// B.js
export default {
  state: {
    foo: null // 先占位
  },
  mutations: {
    initFoo(state, aX) {
      state.foo = 3 + aX
    }
  }
}

2. 在store实例化完成后触发初始化：

// index.js
import moduleA from './modules/A'
import moduleB from './modules/B'

const store = new Vuex.Store({
  modules: {
    A: moduleA,
    B: moduleB
  }
})
// 主动触发初始化，确保在应用挂载前执行即可
store.commit('B/initFoo', store.state.A.x)

内容的提问来源于stack exchange，提问作者Magdy