javascript - vuejs/vuex 中 Props 的顺序、计算和创建

Question

我对使用 vue 和 vuex 计算和创建的操作 props 的正确顺序有一些疑问。

我有以下代码

<script>
  import { mapGetters } from 'vuex'

  export default {
    data () {
      return {}
    },
    props: ['id'],
    methods: {
    },
    computed: {
      ...mapGetters({
        semestre: 'semestre/show/item'
      }),
      titre: function () {
        return this.semestre.nom
      }
    },
    created () {
      this.$store.dispatch('semestre/show/retrieve', parseInt(this.id))
    }
  }
</script>

但是我在计算滴度时遇到错误，该滴度操纵 undefined variable “semestre”。

看来compute是在create之前执行的。因此，如果我尝试使用 beforeCreate 代替 Created，它将不起作用，因为 props 不存在。

所以我认为

创建前=> Prop =>计算=>创建？

但是我怎样才能正确执行我的代码呢？我需要获取 props 中的一个值，将该值传递给 vuex，然后操作 VueX 的结果。 也许，我不明白 vue/vueX 的逻辑。

谢谢

大卫

Answer 1

如果您的计算在 View 中使用，那么是的，它将在提供 semestre 之前进行计算，因为您的 vuex 操作似乎是异步的。如果是异步的，您的created函数将在操作完成之前完成执行。因此，getter 'semestre/show/item' 将始终返回未定义的值，直到 'semestre/show/retrieve' 操作完全完成，即 <强>不会在created完成执行之前。

要处理这个问题，您必须编写组件，以便它们能够处理值的异步加载。您基本上必须编写组件，以便它处理尚未加载的情况，并处理已加载的情况。我建议您更改计算值，以便它处理未定义或空值:

titre: function () {
    return this.semestre && this.semestre.nom;
    //or if you want to provide a default value
    return (this.semestre && this.semestre.nom) || '??';
}

更强大的解决方案是，您可以通过跟踪您的操作是否已完成来向用户提供正在加载值的反馈。

<template>
    <div v-if="isLoading">Content is load (you could display a spinner)</div>
    <div v-else>
        Display your semestre content here:
        {{titre}}
    </div>
</template>
<script>
  import { mapGetters } from 'vuex'

  export default {
    data () {
      return {
          isLoading: false,
      };
    },
    props: ['id'],
    computed: {
      ...mapGetters({
        semestre: 'semestre/show/item'
      }),
      titre: function () {
        return this.semestre.nom
      }
    },
    async created () {
      this.isLoading = true;
      await this.$store.dispatch('semestre/show/retrieve', parseInt(this.id))
      this.isLoading = false;
    }
  }
</script>

如果您无法使用 async/await 关键字，您可以执行以下操作:

created () {
    this.isLoading = true;
    this.$store.dispatch('semestre/show/retrieve', parseInt(this.id))
        .then(() => {
            this.isLoading = false;
        });
}