Vue.js 在vuex状态更改后添加延迟

当值-

v-if

指令绑定到-

true

更改为

false

时，我试图为从元素转换增加一些延迟。我正在使用Vuex来维护

isLoading

的状态，以便在其他组件中使用它

因此，我有一个API调用，它在等待响应时将

this.$store.state.isLoading设置为true，在收到响应时设置为false。但问题是API的响应几乎是即时的，进度条只会在瞬间闪烁

<template>
  <div>
    <b-progress v-if="isLoading" :max="max">
      <b-progress-bar :value="count"></b-progress-bar>
    </b-progress>
  </div>
</template>

<script>
module.exports = {
    data() {
        return {
            count: 0,
            max: 100
        }
    },
    computed: {
        isLoading () {
            return this.$store.state.isLoading;
        }
    }
}
</script>


module.exports={
数据（）{
返回{
计数：0，
最高：100
}
},
计算：{
孤岛加载（）{
返回此。$store.state.isLoading；
}
}
}

在状态改变后增加延迟，这是正确的想法吗？如果是这样，正确的方法是什么？
您应该在API调用之后立即添加延迟，假设您有一个名为
updateIsLoading
的变异来更新
isLoading
状态

fetch（url）
.then（res=>res.json（））
。然后（res=>{
//对你的数据做点什么
setTimeout（（）=>this.$store.commit（'UpdatesLoading'），1000）
})
.catch（…）

如果需要一次性设置延迟，一种解决方案是创建一个操作，然后在收到API调用的响应后分派该操作

操作：{
UpdatesLoading（{commit}）{
setTimeout（（）=>commit（'UpdatesLoading'），1000）
}
}


如果确实希望在组件中执行此操作，可以设置一个观察程序，并在延迟一段时间后更新本地
isLoading
变量：

导出默认值{
数据（）{
返回{
计数：0，
最高：100，
孤岛加载：false
}
},
计算：{
加载（）{
返回此。$store.state.isLoading；
}
},
观察：{
加载（新值、旧值）{
setTimeout（（）=>this.isLoading=newVal，1000）
}
}
}
但我的api调用位于多个其他组件中。我正在尝试使用相同的加载程序。