如何在Vuex的某一模块State中访问另一模块的State？

你当前代码报错是因为State的工厂函数初始化时，Vuex Store还未完成实例化，this.$store此时根本不存在，而且State函数也无法直接获取到rootState或context。下面是几种可行的解决方法：

方法一：使用Getters（推荐，符合Vuex设计规范） #

如果你的需求是基于其他模块的State派生数据，Getters是最优选择——Getters可以接收rootState作为第三个参数，直接访问其他模块的State。

修改module2.js：

export default {
  state: () => ({
    array: [] // 先初始化空数组
  }),
  getters: {
    derivedArray(state, _, rootState) {
      // 直接通过rootState访问module1的State
      const targetItem = rootState.module1.array[0]
      return [
        {
          property: structuredClone(targetItem)
        }
      ]
    }
  }
}

在组件中使用时，通过this.$store.getters['module2/derivedArray']获取派生数据。

方法二：Store初始化完成后手动更新State #

如果必须将数据存储在module2的State中，可以在Store完全创建后，通过Mutation更新State（禁止直接修改State，必须通过Mutation）。

1. 先给module2添加Mutation：

// module2.js
export default {
  state: () => ({
    array: []
  }),
  mutations: {
    SET_MODULE2_ARRAY(state, payload) {
      state.array = payload
    }
  }
}

2. 在Store创建文件（如store/index.js）中完成初始化后更新：

import { createStore } from 'vuex'
import module1 from './module1'
import module2 from './module2'

const store = createStore({
  modules: {
    module1,
    module2
  }
})

// Store初始化完成后，更新module2的State
const clonedItem = structuredClone(store.state.module1.array[0])
store.commit('module2/SET_MODULE2_ARRAY', [
  { property: clonedItem }
])

export default store

方法三：在根组件初始化时更新 #

也可以在应用的根组件（如App.vue）的生命周期钩子中，通过Store的API更新module2的State：

<template>
  <!-- 组件内容 -->
</template>

<script>
export default {
  created() {
    const targetItem = structuredClone(this.$store.state.module1.array[0])
    this.$store.commit('module2/SET_MODULE2_ARRAY', [
      { property: targetItem }
    ])
  }
}
</script>

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