数据方法中的数组在一种方法中得到更新，但在另一种方法中仍然为空

Posted 2023-02-23

【中文标题】数据方法中的数组在一种方法中得到更新，但在另一种方法中仍然为空

【英文标题】：Array in data method gets updated in one method but still empty in another method

【发布时间】：2020-08-17 05:46:14

【问题描述】：

在我的应用程序中，我正在尝试更新数组。首先，我从数据库中获取数据并将其添加到数组中，在另一种方法中我想使用该数组。但是数组没有得到更新。

如果我在 DOM 中使用我的数组 exerciseList，它有数据，但在 getExercises 函数中，数组的长度仍然为 0。就像我在将数据添加到数组之前运行该方法一样像这样。

知道为什么这不起作用吗？

data: () => (
    exerciseList: []

);

created() 
    this.getDataBaseCollection("Exercise", this.exerciseList); // array gets information here

mounted() 
    this.getExercises();
,

methods: 
    getDataBaseCollection: function (CollectionName, list) 
        db.collection(CollectionName).onSnapshot(snapshot => 
            snapshot.forEach(doc => 
                list.push(doc.data());
            );
        );

    ,

    getExercises: function () 
        console.log(this.exerciseList.length);  // length is 0 ?? array seems empty
    
 ,

【问题讨论】：

getDataBaseCollection 需要一些时间才能完成（即它是异步的），因此当getExercises 第一次在mounted 上调用时，之前的方法还没有完成。它在不久之后完成并通过.onSnapshot 回调进行更新

@NikosM。谢谢。我认为这听起来是对的，但是当这个getDataBaseCollection 完成时，无论如何都可以运行所有方法。这是应用程序所有阶段都需要其结果的关键方法。

当然有，通过在.onSnapshot 回调结束时调用init 函数来更新状态（重新渲染）

当数据尚未加载时（即.onSnapshot尚未被调用）显示例如一个加载器，通知用户等待

@NikosM。谢谢，但是是否可以在代码中显示一个示例，我无法理解 init 函数的意思。我不介意用户通知，因为目前我想确保我的代码仅在数组包含数据后才运行。

【参考方案1】：

我认为一个关键的缺失部分可能是更新组件的 exerciseList 变量，而不是 list 参数。它们不是同一个变量。对象通过引用传递，但数组仅通过值传递给函数，这使得list 成为独立于excerciseList 的独立变量。这是一个粗略的代码，展示了一些确保 exerciseList 更新的方法以及如何知道值何时都在数组中。

// include exerciseListLoaded to flag when all data is ready
data: () => (
    exerciseList: [],
    exerciseListLoaded: false
);

created() 
    this.getDataBaseCollection("Exercise"); // array gets information here

mounted() 
    // based on timing of the `onSnapshot` callback related to `mounted` being called, this may likely still result in 0
    console.log("Mounted");
    this.getExercises();
,

watch: 
    // watch for all data being ready
    exerciseListLoaded () 
       console.log("All Loaded");
       this.getExercises();
    
,

methods: 
    // be sure to update the exerciseList on the component
    getDataBaseCollection: function (CollectionName) 
        // being careful about `this` since within `onSnapshot` I suspect it will change within that function
        const componentScope = this;
        db.collection(CollectionName).onSnapshot(snapshot => 
            snapshot.forEach(doc => 
                componentScope.exerciseList.push(doc.data());
                // could also still update `list` here as well if needed
            );
            // setting this allows the component to do something when data is all loaded via the `watch` config
            componentScope.exerciseListLoaded = true;
        );

    ,

    getExercises: function () 
        console.log(this.exerciseList.length);  // length is 0 ?? array seems empty
    
 ,

【参考方案2】：

当你在函数中使用this 时，它指的是函数而不是 vue 实例，因此你可以使用它可能对你有用：

getExercises() 
        console.log(this.exerciseList.length);