Javascript Vue：当我更改控制台日志时，数据仅在第一次渲染时传递给子级，在刷新时被删除

我将数据从一个文件（store.js）传递到另一个文件（Home.vue），然后尝试将数据作为道具传递到子组件（Cards）中

由于某些原因，在第一次渲染时，数据不会从存储传递到主存储。但是，如果我编辑console.log（即使附带的字符串中只有一个字符），那么数据就会进入并更新我的状态。如果我刷新，我们就回到原点

我尝试使用created（）和mounted（）执行此操作，并添加了一个v-if来检查在渲染之前是否加载了数据

以下是相关代码：

store.js

const store = {
  pictures: null,
};

mariaCollection.onSnapshot((mariaRef) => {
  const data = [];
  mariaRef.forEach((doc) => {
    const instance = doc.data();
    instance.id = doc.id;
    data.push(instance);
  });
  store.pictures = data;
  console.log(store.pictures);
});

export { mariaCollection, db, Timestamp, GeoPoint, store };

Home.vue

<template>
  <div>
    <h2>Home</h2>
    <Cards v-if="dataLoaded" v-bind:imageData="pictures" />
  </div>
</template>
<script>
import { store } from "../db";
import Cards from "../components/Cards";

export default {
  components: {
    Cards,
  },
  data() {
    return {
      test: "test",
      family: "",
      pictures: null,
      dataLoaded: false,
    };
  },
  created() {
    this.pictures = store.pictures;
    console.log("created " + JSON.stringify(store.pictures));
    this.dataLoaded = true;
  },
};
</script>

家
从“./db”导入{store}；
从“./组件/卡片”导入卡片；
导出默认值{
组成部分：{
卡，
},
数据（）{
返回{
测试：“测试”，
家庭：“，
图片：空，
数据加载：false，
};
},
创建（）{
this.pictures=store.pictures；
log（“创建”+JSON.stringify（store.pictures））；
this.dataload=true；
},
};

我的控制台的附带图像：

---

hmm可能您的mariadb快照尚未准备好。它是一个需要时间执行的异步函数吗？可能创建和安装的钩子是在db快照出现之前运行的。所以它是空的。当Vue执行热重新加载时，变量将被填充，所创建的钩子将按预期工作。您甚至可以在控制台屏幕截图中证明这种行为。数据的控制台日志显示在您创建的console.log.hmm之后，可能您的mariadb快照尚未准备好。它是一个需要时间执行的异步函数吗？可能创建和安装的钩子是在db快照出现之前运行的。所以它是空的。当Vue执行热重新加载时，变量将被填充，所创建的钩子将按预期工作。您甚至可以在控制台屏幕截图中证明这种行为。数据的控制台日志显示在创建的console.log之后。