Vue：在 v-for 中使用方法但 getter 尚未准备好

Question

我的模板中有一个 v-for，我使用一种方法来获取名称。由于 v-for 在页面加载时立即命中并运行每个索引的方法，因此我在方法中抓取的 pages 通常在前几个循环中未定义（let pages = this.$store.getters['section2/getPages']）。有没有更好的方法来处理这个问题？

模板：

<div class="target-box-child" v-for="(target,index) in this.$store.getters['liveDashboard/getDesiredTargets']" :key="index">
   <div>{{ getGroupOrPageName(target) }}</div>
</div>

methods: {
  getGroupOrPageName: function(target) {
    if (target.type == "page") {
      let pages = this.$store.getters['section2/getPages'];
      if (!pages || pages.length == 0) {
        return;
      }
      pages.filter(page => {
        return page.id == target.id;
      })
      return "FB Page: " + pages[0].name;
    }
  },
}

Answer 1

与往常一样，使用方法渲染模板的一部分是bad idea。

相反，我将创建一个计算属性来生成一个页面数组，该数组对您的liveDashboard/getDesiredTargets 和section2/getPages getter 都具有反应性。

您还可以使用 mapGetters 帮助器来减少一些长 getter 名称

<div class="target-box-child" v-for="targetPage in targetPages" :key="targetPage.id">
   <div>FB Page: {{ targetPage.name }}</div>
</div>

import { mapGetters } from "vuex"

export default {
  computed: {
    ...mapGetters("liveDashboard", {
      targets: "getDesiredTargets" // alias "liveDashboard/getDesiredTargets" as "this.targets"
    }),
    ...mapGetters("section2", {
      pages: "getPages" // alias "section2/getPages" as "this.pages"
    }),
    targetPages: ({ targets, pages }) => {
      // create a map for easy location
      const pagesById = (pages ?? []).reduce((map, page) =>
        map.set(page.id, page), new Map())
    
      // find the "page" target IDs
      const targetIds = targets.filter(({ type }) => type === "page")
        .map(({ id }) => id)

      // now build up an array from the target IDs
      return targetIds.reduce((arr, id) => {
        if (pagesById.has(id)) {
          arr.push(pagesById.get(id))
        }
        return arr
      }, [])
    }
  }
}

Answer 2

您需要为您的 getter 创建一个计算属性。最佳做法是为此使用mapGetters，以减少样板代码。

import { mapGetters } from 'vuex'

 computed: {
...mapGetters('liveDashboard', ['getDesiredTargets']),
}

然后在您的模板中，在您的 v-for 循环之前添加 v-if 条件 (Here is why)。

<template v-if="getDesiredTargets">
<div class="target-box-child" v-for="(target,index) in getDesiredTargets" :key="index">
   <div>{{ getGroupOrPageName(target) }}</div>
</div>
<template />