javascript - 我可以在 Vue/Vuex 中使用 mapGetters 动态调用 getter 吗？

Question

我的组件模板:

<template>
  <section class="stage my-5">

      <div class="stage-heading">
        <h3 class="stage-number mb-4">Stage {{stage}}</h3>
        <h6 class="stage-hrs">Total Hrs: {{totalHours}}</h6>
      </div>

      <div class="stage-courses card text-white bg-info mb-3" v-for="course in courses" :key="course.id">
        <div class="card-header">Stage {{course.stage}}</div>
        <div class="card-body">
          <h5 class="card-title">{{course.title}}</h5>
          <p class="card-text">{{course.creator}}</p>
          <p class="card-text">{{course.hours}} Hours</p>
        </div>
      </div>

    </section>
</template>

我的 Vuex 商店中的状态:

const state = {
  roadmapStage1: [], 
  roadmapStage2: [],
  roadmapStage3: [],  
};

我的 Vuex 商店中有 getter，如下所示:

getRoadmapStage1: state => state.roadmapStage1,
getRoadmapStage2: state => state.roadmapStage2,
getRoadmapStage3: state => state.roadmapStage3,

我正在尝试从组件动态调用这些 getter 之一，该 getter 取决于组件的 prop:

export default {
  name: "Stage",
  data() {
    return {
      courses: []
    }
  },
  props: ['stage'],
  computed: mapGetters({courses: 'getRoadmapByStage'})
}

有什么方法可以将 Prop 插入到“getRoadmapByStage”中吗？例如所以它的功能类似于
getRoadmapByStage${stage}？

最终，我试图让组件在 roadmapStage 数组更新时重新渲染。谢谢!

Answer 1

我建议使用带有阶段 id/编号参数的 getter，它会返回您想要的路线图，如下所示:

// in getters.js
//gets the current roadmap based on the stage number
getRoadmapByStage: (state) => (stageNumber) => {
    return state["roadmapStage" + stageNumber];
}

现在在您的组件中您可以拥有:

computed: {
   currentRoadmap() {
      // now we'll pass in your 'stage' prop to get the appropriate map
      // this will re-render the component as that prop changes
      return this.$store.getters.getRoadmapByStage(this.stage);
   }
}