Typescript 如何修饰装入器方法以与装入指示器组件一起使用？（在Vue中）

为了重用加载进度指示，我创建了一个具有插槽和枚举属性的组件，如下所示：

<template>
    <div class="loaded-listing">
        <div class="loaded-listing__loading-placeholder" v-if="isLoading">
            <some-third-party-indicator ... />
        </div>
        <slot v-else />
        <!-- the Failed status is not displayed yet -->
    </div>
</template>

<script lang="ts">

    export enum loadStatusEnum {
        Loading,
        Loaded,
        Failed
    }

    import { Component, Prop, Vue } from 'vue-property-decorator'
    import { SomeThirdPartyIndicator } from 'some-third-party-indicator'

    @Component({
        props: ['loadStatus'],
        components: { SomeThirdPartyIndicator },
    })
    export default class LoadedListing extends Vue {
        @Prop() readonly loadStatus!: loadStatusEnum;
        get isLoading (): boolean {
            return this.loadStatus == loadStatusEnum.Loading
        }
    }

</script>

import LoadedListing, { loadStatusEnum } from '../components/LoadedListing.vue'

export default class SomePage extends Vue {
    ...
    someStuffLoadStatus: loadStatusEnum = loadStatusEnum.Loading; // 1
    loadSomeStuff (): void {
        this.someStuffLoadStatus = loadStatusEnum.Loading; // 2
        this.$store.dispatch('someModule/loadSomeStuff', ...) // some model updating in a callback
            .then(() => this.someStuffLoadStatus = loadStatusEnum.Loaded) // 3
            .catch(() => this.someStuffLoadStatus = loadStatusEnum.Failed) // 4
    }
    ...
}

在模板中：

<LoadedListing class="some-stuff-list" :load-status="someStuffLoadStatus">
    <div class="some-stuff-list__top-panel"> ... </div>
    <VueSimplebar class="some-stuff-list__body" ...> ... </VueSimplebar>
</LoadedListing>

... 
... 

我不喜欢这种方法的地方是：

• 我为每个加载器写1-4行
• 我在父组件内创建

  someStuffLoadStatus

  属性，并将其作为道具传递给组件，但它与主模型无关，它只反映组件使用的负载状态

---

似乎只装饰加载程序并以某种方式将其与某个组件实例连接（使用

ref

？）更合适，但我不确定如何实现这一点。您能提出一种装饰/连接的方法吗？

我不确定装饰如何与Typescript/Vue一起工作，但在我的一个项目中，我只是使用了一个mixin来提供这种功能

以下解决方案未经测试，但为您提供了如何使用此mixin跟踪加载状态的总体思路：

//加载\u mixin.js
导出默认值{
数据（）{
返回{
加载器：{
//此对象将包含传递给的各种键
//`wrap（）`函数`type`参数。
}
}
},
方法：{
/**
*@param{Promise}Promise
*@param{String}类型
*@returns{Promise}
*/
包装（承诺、类型）{
让loaded=this.loader[type]？this.loader[type]。loaded:false；
this.$set（this.loader，类型，{loading:true，loaded:loaded}）；
返回承诺。然后（（数据）=>{
this.$set（this.loader，类型，{loading:false，loaded:true}）；
返回数据；
}).catch（（错误）=>{
this.$set（this.loader，类型，{loading:false，loaded:false}）；
犯错误；
});
},
}
}

用法（

YourComponent.vue

）：

从“…”导入loadingMixin；
导出默认值{
mixin:[加载mixin]，
方法：{
加载（）{
this.wrap（this.loadMyData（1,2），'load_data'）。然后（（data）=>{
//处理成功。
}).catch（（错误）=>{
//处理错误。
})
},
loadMyData（a、b）{
返回承诺。解决（a+b）；
}
}
}

---

我希望这能给你一些想法。

谢谢，“每个组件一个加载程序”在我的情况下并不好（虽然我可以创建额外的组件，但出于任何其他原因都不需要），但我会看看mixin并进行更多搜索是的，我想是的，我还没有看到一个优雅的解决方案，但我认为你可以更改

wrap（）

函数获取一个额外的参数，如标识符，然后使用该标识符在

加载

属性中设置一个键，该属性现在成为一个对象（key=identifier，value=true/false）。我已经重写了答案，也许这会对您有所帮助