首页 文章

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

提问于
浏览 次
0

我有一些关于操纵道具的正确顺序的问题，使用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逻辑中的某些东西 .

谢谢

大卫

javascript vue.js vuex

1 回答

  • 1

    如果在视图中使用了计算机，则会在提供 semestre 之前计算它，因为您的vuex操作似乎是异步的 . 如果它是异步的，则 created 函数将在操作完成之前完成执行 . 因此，getter 'semestre/show/item' 将始终返回未定义的值，直到 'semestre/show/retrieve' 操作完全完成，这将在 created 完成执行之前 not .

    要处理此问题，您必须编写组件以便它们处理值的异步加载 . 您基本上必须编写组件，以便它处理尚未加载的情况，并处理已加载的情况 . 我建议你更改你的计算，以便它处理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;
        });
}
    回复于

相关问题