根据路由显示同一组件中的不同数据Vue/Vuex

Question

在基于值匹配的按钮单击上，我用我在另一个组件中可视化的对象填充了一个数组。我想要实现的是：根据我目前所走的路线，我想要可视化数据的同一组件来显示不同的数据。数据在一系列步骤之后填充，这些步骤以下面提交突变@click 的方法结束，为了达到所述步骤，您将转到不同的路线。到目前为止，当我从该组件中的多个路由填充数据时，我正在实现的是在另一个列表之上生成列表。

modifySelectedLimitCardStatus() {
  const payload = [
    this.editedLimitCard.id,
    (this.editedLimitCard.limit_card_selected_status = true)
  ];
  this.$store.commit("selectLimitCard", payload);
}

状态&突变：

 selectedLimitCard: [],

 selectLimitCard: (state, payload) => {
    state.limitCards.forEach(limitCard => {
      if (
        limitCard.id === payload[0] &&
        limitCard.limit_card_selected_status !== payload[1]
      ) {
        state.selectedLimitCard.push(limitCard);
        console.log(state.selectedLimitCard);
      }
    });
  }

getter:

  getSelectedLimitCard: state => {
    return state.selectedLimitCard;
  }

最后，可视化数据的组件：

  <v-list v-for="card in getSelectedLimitCard" :key="card.id"">
        <v-list-tile>
          <v-list-tile-content>№</v-list-tile-content>
          <v-list-tile-content class="align-end">
            {{ card.limit_card_number }}
          </v-list-tile-content>
        </v-list-tile>
      </v-list>

有人可以给我一个想法并指出正确的方向吗？提前致谢！

Answer 1

根据评论部分的反馈，听起来数据存储可能是问题所在，数组是此任务的 ill-prepared 数据结构。我建议使用一个简单的 JSON 对象，每个键都是刚刚创建的路由：

limitCards = {
    routeone: {
        payload: ...,
        other_route_specific_data: ...
    },
    routetwo: {
        payload: ...,
        other_route_specific_data: ...
    }
}

然后您可以将 "v-for" 的数据绑定到 return 的：

limitcards.[current route].selectedLimitCard

这似乎可以解决唯一性和向路由显示每个选项卡特定数据的能力。

根据路由显示同一组件中的不同数据Vue/Vuex

Displaying different data in the same component based on routes Vue/Vuex

vue.js

vuex

dynamically-generated