Javascript 如何在vuejs中反应式渲染外部阵列

我制作了一个小型库来跟踪所有api调用的加载情况。
它基本上是一个数组，包含描述一个加载过程的对象。我将该库导入到单个文件组件中以调用它。然后，我将数组从库传递给子组件，并希望呈现数组中的所有对象（加载状态）。我在子组件的Vue Devtools中看到了数据更新，但在页面中没有更新

我尝试的是：

• 从父组件传递vue实例并使用$set更新阵列
• 使用array.splice更新阵列
• 使用object.assign创建新对象，更新新对象，然后更新阵列（拼接/$set）
• 在更新W对象时传递密钥并更新此密钥
• 在控制台中调用库中的方法

示例更新功能：

function _finish(name, descFinished) {
        const i = _loaders.findIndex(l => l.name == name);
        if(i < 0) throw new NameNotFoundException(name);
        let loader = Object.assign({}, _loaders[i]);
        if(descFinished != undefined) loader.descFinished = descFinished;
        loader.loading = false;
        loader.error = false;
        loader.endTime = new Date();
        vm.$set(_loaders, i, loader);
        return _loaders[i];
}

我在vue SFC中导入库，并在挂载的钩子中调用它

import loadhelper from "../../helpers/Loadstatus.js";
...
data() {
    return {
        loadstatus: null
    }
}
...
mounted() {
    this.loadstatus = loadhelper.makeLoadManager(this);
}

我的问题归结为：如何在vue中反应性地呈现或正确地更新js库中的数组

---

如果这有助于回答我的问题，我很乐意提供更多信息。

如果您的库正在创建（和管理）一个“加载程序”数组，您可以做的最简单的事情就是在Vue组件的数据中定义空的反应数组，并在

mounted

hook中为您的库数组分配一个引用。像这样：

从“/components/LoadingStatus”导入加载状态；
从“/helpers/LoadManager.js”导入loadhelper；
导出默认值{
名称：“应用程序”，
组成部分：{
装载状态
},
数据（）{
返回{
状态：[]
};
}
安装的（）{
this.statuses=loadhelper.getAllLoaders（）；
}
};

Vue获取库提供的阵列，并使其成为反应式阵列。您可以像这样使用模板：

见

---

只要Vue和“负载管理器”都使用同一个阵列（参考），一切都很好。我将

setTimeout

回调添加到

LoadManager

中，以演示“从Vue外部”进行的更改到阵列将使Vue组件重新呈现…

如何将外部库转换为vuex模块？如果可能，我希望将其保留为外部库，以便在其他项目中重复使用。如果您唯一的要求是可移植性，您可以制作一个新的，这看起来很有趣，如果没有其他弹出窗口，我将尝试。谢谢。这对我来说是一个完美的解决方案，我不可能要求更好的答案。非常感谢。

<template>
    <div v-if="statuses">
        <div v-for="status in statuses" :key="status.name">
            <div>
                {{ status.loading == true ? 'true' : 'false' }}
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'loading-status',
    props: {
        statuses: {
            type: Array,
            required: true
        }
    }
}

function loadmanager(vueinstance) {
    //library internals here
    // for example my array i want to render:
    let _loaders = [];
    var publicInterface() {
        //public accesable functions here
        //i call this to pass the array to my child component
        getAllLoaders() {
            return _loaders;
        }
    }
    return publicInterface;
}
exports.makeLoadManager = loadmanager;

import loadhelper from "../../helpers/Loadstatus.js";
...
data() {
    return {
        loadstatus: null
    }
}
...
mounted() {
    this.loadstatus = loadhelper.makeLoadManager(this);
}