Vue/Nuxt - 从一个 vue 插件观察/计算数组的长度答案

【问题标题】：Vue/Nuxt - Watch / computed length of array from a vue pluginVue/Nuxt - 从一个 vue 插件观察/计算数组的长度
【发布时间】：2020-11-16 15:43:11
【问题描述】：

我想在我的 vue 组件中显示一个数组的长度。该数组嵌套在一个 vue 插件中。
每次我启动 API Call 时，我都会在此数组中“推送”一个新元素：this.$apiCall.apiCallCache

这可以监视这个数组的变化吗？我在下面的示例中做错了吗？

我只得到0 洞时间。但是，如果我点击按钮并触发logApiCache()，它将控制台记录数组的正确长度，而计算的函数在 span 元素/工具提示中仍显示 0。

<template>
    <v-footer
        app
        tile
    >
        <span>Queue: {{ footerClockTooltip() }}</span>
        <app-footer-button
            :name="'Clock'"
            :tooltip="footerClockTooltip()"
            :icon="$icons.mdiClockOutline"
            @click="logApiCache"
        />
    </v-footer>
</template>

<script>
export default {
    name: 'Footer',
    computed: {
        /*
        footerClockTooltip() {
            return this.$apiCall.apiCallCache.length
        }
        */
    },
    methods: {
        logApiCache() {
            this.$forceUpdate()
            console.error(`logApiCache: ${this.$apiCall.apiCallCache.length}`, this.$apiCall.apiCallCache)
        },
        footerClockTooltip() {
            console.error('New Queue:', this.$apiCall.apiCallCache.length)
            return this.$apiCall.apiCallCache.length
        }
    }
}
</script>

编辑：

这是我的 Vue 插件：

import Vue from 'vue'
const ApiClass = require('../classes/ApiClass')
const api = new ApiClass()

// Export Vue Plugin
const ApiCalls = {
    install(Vue) {
        Object.defineProperties(Vue.prototype, {
            $apiCall: {
                get() {
                    return api
                }
            }
        })
    }
}

Vue.use(ApiCalls)

感谢您的帮助。 :)

【问题讨论】：

您能分享一下您插件中的代码吗？我认为它可能很有用。还有你使用的是哪个版本的 Nuxt？
感谢您的帮助。 :) 我添加了上面的文件，这里是我的版本："nuxt": "2.12.2"。我想看的数组的重要部分是addCall > this.apiCallCache.push({ ... })
Vue 不保留预突变值的副本，因此问题可能是您将数据推送到现有数组中，而不是创建新数组并使用现有数据和新数据更新它。
这到底是什么意思？我有点失落。在我的 Vue 插件中，我从 ApiClass 创建了一个实例。然后我将这个实例绑定到我的 Vue 对象，所以我可以使用this.$apiCall 访问它。现在，如果我在单独的组件中启动请求/api 调用，我只需调用this.$smcApiCall.addCall(request, callback)。然后addCall 函数将一个新对象推送到类属性的数组中。
即使我手动将数据“推送”到这个数组，我的计算函数也不会更新我的 span 元素。但同样，console.log 中的长度是正确的，如您在这张图片中看到的：link

标签： javascript vue.js electron nuxt.js

【解决方案1】：

好的...经过长时间的搜索后，我找到了解决方案。
第一步是在上面提到的页脚组件中添加一个具有默认值的新属性，例如apicalls: null。之后，我在我的组件中创建了一个 created() 部分并将本地属性 apicalls 链接到 this.$apiCall.apiCallCache 并且它是反应性的。我的计算函数现在可以工作了。

之后我找到了一个更简单的解决方案。我只需要以不同的方式分配我的 vue 插件Vue.observable(api)：

import Vue from 'vue'
const ApiClass = require('../classes/ApiClass')
const api = new ApiClass()

// Export Vue Plugin
const ApiCalls = {
    install(Vue) {
        Vue.prototype.$apiCall = Vue.observable(api)
    }
}

Vue.use(ApiCalls)

有人可以解释一下，为什么这种新方法使我的数组具有反应性，但不是我的第一种方法？

【讨论】：