Vuex配合axios发送Post请求，拆分Store模块后访问返回数据报错如何解决

拆分Vuex模块后，模块内的state不会直接挂载到根state下，默认会以模块名为key挂载到根state下，你原有直接读取根stateinspection字段的写法无法取到正确值，导致v-data-table绑定的items为undefined触发报错。

步骤1：修正Vuex状态读取逻辑 #

提供两种可选方案：

方案A：直接指定模块状态路径（无需开启命名空间） #

修改SecondComponentDataTable的计算属性写法：

import { mapState } from "vuex";
export default {    
  computed: {
    ...mapState({
      inspection: state => state.inspectionReview.inspection
    })
  }
}

方案B：开启模块命名空间（更规范，适合多模块项目） #

1. 给store/modules/inspectionReview.js添加命名空间配置：

export default {
  namespaced: true, // 新增此行开启命名空间
  state,
  actions,
  mutations,
}

2. 修改组件内的状态读取和action触发逻辑：

• 调整SecondComponentDataTable的mapState，添加命名空间前缀：

import { mapState } from "vuex";
export default {    
  computed: {
    ...mapState('inspectionReview', ['inspection'])
  }
}

• 调整Component-1内的dispatch写法，添加命名空间前缀：

SET_HANDLER() {
  this.showDT = true;
  this.$store.dispatch('inspectionReview/getPosts', this.entity)
}

步骤2：优化渲染时机避免偶发报错 #

你当前是先渲染子组件再发起接口请求，子组件初始渲染时可能还没拿到接口返回数据，可以调整为请求成功后再显示子组件：

async SET_HANDLER() {
  await this.$store.dispatch('inspectionReview/getPosts', this.entity)
  this.showDT = true
}

步骤3：兼容接口返回格式 #

如果后端返回的inspection是单个对象而非数组，需要转成数组再赋值，符合v-data-table的items参数要求：
修改store/modules/inspectionReview.js的mutation：

SET_FILTERED(state, inspection) {
  state.inspection = Array.isArray(inspection) ? inspection : [inspection]
}

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