Vuex状态管理致Ionic表格数据覆盖及详情展示异常求助

问题1：返回主页后表格第一条数据inspectionId被覆盖 #

这是因为Vuex中保存选中项时，直接赋值了列表中对象的引用，详情页中哪怕是无意的双向绑定操作，都会同步修改原列表里的对应对象。

修复： #

在Vuex的mutation中设置选中项时，对对象进行深拷贝，切断引用关系：

// store/modules/inspections.js 中的 SET_SELECTED_INSPECTION 方法
SET_SELECTED_INSPECTION(state, inspection) {
  // 深拷贝对象，避免修改原列表数据
  state.selectedInspection = JSON.parse(JSON.stringify(inspection));
  // 如果对象结构简单，也可以用扩展运算符：state.selectedInspection = {...inspection};
}

问题2：详情页仅inspectionId正确，Material/Status显示第一条数据值 #

这大概率是详情页模板绑定错误，误绑定了原列表的第一个元素，而非Vuex中存储的选中项。

修复： #

1. 在详情页组件中通过mapState获取Vuex中的选中项：

<script>
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState(['selectedInspection'])
  }
}
</script>

2. 模板中直接绑定选中项的对应字段：

<template>
  <div class="details">
    <p>Inspection ID: {{ selectedInspection.inspectionId }}</p>
    <p>Material: {{ selectedInspection.Material }}</p>
    <p>Status: {{ selectedInspection.Status }}</p>
  </div>
</template>

另外检查主页表格的绑定逻辑，确保没有用v-model直接绑定选中项的字段到列表元素上，尽量用单向绑定（{{ }}）展示数据，避免意外修改原数组。

内容的提问来源于stack exchange，提问作者Merve Gül