在 vuejs/vuex 中的道具、计算和创建的顺序答案

【问题标题】：Order of Props, Computed, and Created in vuejs/vuex在 vuejs/vuex 中的道具、计算和创建的顺序
【发布时间】：2018-05-29 20:09:15
【问题描述】：

我对使用 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>

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

似乎计算是在创建之前执行的。所以如果我尝试使用 beforeCreate 代替 Created，它就不起作用，因为 props 不存在。

我觉得

beforeCreate => Props => Computed => Created ?

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

谢谢

大卫

【问题讨论】：

标签： javascript vue.js vuex

【解决方案1】：

如果在视图中使用了您的计算，那么是的，它将在提供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;
        });
}

【讨论】：