在vuejs / vuex中创建道具，计算和创建的顺序

Question

我有一些关于操纵道具的正确顺序的问题，使用vue和vuex计算和创建道具。

我有以下代码

<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>

但我有一个错误，在计算滴度操纵一个未定义的变量“semestre”。

似乎计算在创建之前执行。因此，如果我尝试在创建的地方使用beforeCreate，它不起作用，因为props不存在。

所以我认为

beforeCreate => Props => Computed => Created？

但是如何才能正确执行我的代码呢？我需要在props中获取值，将此值传递给vuex，然后操纵VueX的结果。也许，我不理解vue / vueX逻辑中的某些东西。

谢谢

大卫

Answer 1

如果在视图中使用了计算机，那么它将在提供semestre之前计算，因为看起来你的vuex动作是异步的。如果它是异步的，那么你的created函数将在动作完成之前完成执行。因此，getter 'semestre/show/item'将始终返回未定义的值，直到'semestre/show/retrieve'操作完全完成，这不会在created完成执行之前。

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

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