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商店中有一些吸气剂，如下所示：

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

我正在尝试从组件中动态调用这些getter之一，这取决于组件的支持：

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

是否可以将道具插入“ getRoadmapByStage”？例如所以它的功能类似于getRoadmapByStage${stage}？

最终，我正在尝试使组件在任何一个mapmapStage数组更新时重新渲染。谢谢！

Answer 1

我建议使用带有参数的吸气剂作为返回您想要的路线图的阶段ID /数字，例如：

// 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);
   }
}

Answer 2

您可以按以下方式声明计算出的roadmap属性：

computed: {
  roadmap() {
    return this.stage ? this.$store.getters['getRoadmapByStage' + this.stage] : undefined
  },
}

这样，您就可以通过prop的值获取路线图；如果prop没有设置为任何值，则可以通过undefined来获取路线图。

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

2 个答案: