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 =＆gt;道具=＆gt;计算=＆gt;创建？

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

由于

大卫

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

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

1 个答案: