vue.js - vuex 完成后加载时设置 false

Question

在加载中放置错误的正确方法是什么(在调度之后)？

喜欢:(我知道这不起作用)

this.loading = true;
this.$store.dispatch('items', data);
this.loading = false;

<script>
    export default {

        data() {
            return {
                loading: false,
            }
        },


        methods: {

            store() {

                this.loading = true;
                this.$store.dispatch('items', data);

            },
        },
    }
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

Answer 1

有几种方法可以做到这一点。

选项 1:

行动会返回 promise ，因此请充分利用它。

this.loading = true;
this.$store.dispatch('items', data)
.then(() => {
   this.loading = false;
})

我更喜欢这种处理方式，因为 loading 是在您使用它的地方精确定义和更新的。

选项 2:

如果您需要在多个组件之间共享加载状态，这很有用。

将loading放入商店的状态中，并在items操作中的适当时间更新它。然后，您可以在组件中将 loading 用作 $store.state.loading (或作为计算属性)。