如何在 vuejs 中反应性地渲染外部数组

Question

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

我尝试了什么：

• 从父组件传递vue实例并使用$set更新数组
• 使用array.splice 更新数组
• 使用 Object.assign 创建新对象，更新新对象，然后更新数组 (splice/$set)
• 在更新对象时传递一个键并更新这个键
• 在控制台中调用库中的方法

样本更新函数：

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];
}

我这样传递给子组件

<loading-status v-if="loadstatus" :statuses="loadstatus.getAllLoaders()"></loading-status>

子组件看起来这个

<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
        }
    }
}

image of the array not being reactive on the page

更多可能有用的信息：

库结构：

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;

我在vue SFC中导入库并在mounted hook中调用

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

我的问题归结为：如何从 vue 中的 js 库响应式渲染或正确更新数组。

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

Answer 1

如果您的库正在创建（和管理）“加载器”数组，您可以做的最简单的事情是在 Vue 组件的数据中定义空的响应式数组，并在 mounted 挂钩中为您的库数组分配一个引用。像这样：

import LoadingStatus from "./components/LoadingStatus";
import loadhelper from "./helpers/LoadManager.js";

export default {
  name: "App",
  components: {
    LoadingStatus
  },
  data() {
    return {
      statuses: []
    };
  }
  mounted() {
    this.statuses = loadhelper.getAllLoaders();
  }
};

Vue 采用您的库提供的数组并使其具有反应性。您可以像这样使用模板：

<LoadingStatus :statuses="statuses"/>

见demo

只要 Vue 和您的“负载管理器”都使用同一个数组（参考），一切都很好。我已将 setTimeout 回调添加到 LoadManager 中，以证明“从 Vue 外部”对数组的更改将使 Vue 组件重新渲染......