Ionic Vuex 状态管理：应对表格覆盖和检查 ID 显示的解决方案

2024-03-03 19:05:37

Ionic 中 Vuex 存储管理下覆盖表格的解决方案

在 Ionic 应用中使用 Vuex 进行状态管理时，您可能会遇到表格数据被覆盖的问题，以及在详情视图中仅显示第一项检查项的材料和状态。本文将详细探讨这些问题，并提供逐步解决方案。

问题 1：表格数据覆盖

此问题源于在返回详情视图时错误地使用 Vuex store.commit() 函数。为了正确存储所选项目的 inspectionId，我们需要更新代码：

this.$store.commit('updateSelectedInspection', selectedInspection);

问题 2：仅显示检查 ID

该问题是由直接使用 getters 获取详情引起的。我们需要创建计算属性来获取当前所选检查项的材料和状态：

// 组件中的计算属性
computed: {
  selectedInspectionDetails() {
    const selectedInspection = this.$store.getters['selectedInspection'];
    return {
      material: selectedInspection.material,
      status: selectedInspection.status,
    };
  },
},

解决方案

完整代码

为了解决这两个问题，请使用以下完整代码：

// Vuex 存储
export function inspectionReducer(state = initialState, action) {
  switch (action.type) {
    case 'UPDATE_SELECTED_INSPECTION':
      return state.map(inspection => {
        if (inspection.inspectionId === action.payload.inspectionId) {
          return action.payload;
        }
        return inspection;
      });
    default:
      return state;
  }
}

// HomePage
selectInspection(inspection: Inspection) {
  this.store.dispatch({ type: 'UPDATE_SELECTED_INSPECTION', payload: inspection });
  this.router.navigateByUrl(`/detail/${inspection.inspectionId}`);
}

// DetailPage
ngOnInit() {
  this.store.select('inspections').subscribe(inspections => {
    this.selectedInspection = inspections.find(inspection => inspection.inspectionId === +this.router.url.split('/').pop());
  });
}

// HTML
// home.page.html
<ion-item *ngFor="let inspection of inspections" (click)="selectInspection(inspection)">
  <ion-label>
    <h2>{{ inspection.inspectionId }}</h2>
    <p>{{ inspection.material }}</p>
    <p>{{ inspection.status }}</p>
  </ion-label>
</ion-item>

// detail.page.html
<ion-item>
  <ion-label>
    <h2>{{ selectedInspection?.inspectionId }}</h2>
    <p>{{ selectedInspection?.material }}</p>
    <p>{{ selectedInspection?.status }}</p>
  </ion-label>
</ion-item>