Vue.js 基于路由Vue/Vuex在同一组件中显示不同的数据

在基于值匹配的按钮单击中，我正在用我在另一个组件中可视化的对象填充数组。 我试图实现的是： 根据我当前所在的路线，我希望使用相同的组件来可视化数据，以显示不同的数据。 数据是在一系列步骤之后填充的，这些步骤以提交以下@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);
      }
    });
  }

吸气剂：

  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>

---

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

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

然后，您可以将“v-for”的数据绑定到以下内容的返回：

limitcards.[current route].selectedLimitCard

这似乎可以解决唯一性问题以及将每个选项卡特定数据显示到路由的能力。
从一个组件到另一个组件（在本例中，vuex作为“中介”），您可以强制将显示可视化绑定到保存该数组的vuex数据对象。我不确定这是否回答了您的问题，但稍作澄清会有所帮助：您是否只要求由用户驱动页面以在单独的组件中驱动可视化，其中唯一的变化是vuex数据存储？@HoratiusCocles我想我是通过
v-for=“card in getSelectedLimitCard”：key=“card.id”来实现的
，但是每次我用不同管线的新数据填充组件时，它都会在组件的顶部插入&创建两个组件，而不是为每个管线创建两个单独的组件。那么您想为每个管线创建多个视图吗？比如，第一次触发route_one时，它会创建该列表，然后第一次触发route_two时，它会在第一次可视化的旁边创建第二个列表？如果“重新”触发现有路由，预期结果是什么？只是更新现有的列表可视化？在试图正确回答您之前，只需澄清问题以确保我理解。@Horatiuscoles我基本上想要实现的是：所有用户都从名为
/dashboard
的默认组件开始。它们通过一个步进器，在最后一步，它们单击一个按钮，在
route1
上填充一个列表。然后，他们打开另一个选项卡（如Google Chrome选项卡），再次将他们带到
/dashboard
组件，但这一次，他们在
route2
。它们再次通过步进器，在最后一步，它们再次单击填充相同列表（相同组件）的按钮。但是，我希望此列表中包含
route2
的数据，并包含
route1
@HoratiusCocles的差异数据。问题是：所述列表中的数据有些静态，因此在为特定路线选择后无需更新。谢谢您的时间和您详尽的回答，先生！现在这里有点晚了，所以我无法实施您的解决方案，但我相信它是正确的，所以明天早上的第一件事！