firebase（firestore）和vuejs + vuefire的非常奇怪的反应性问题答案

【问题标题】：Very weird reactivity issue with firebase (firestore) and vuejs + vuefirefirebase（firestore）和vuejs + vuefire的非常奇怪的反应性问题
【发布时间】：2020-10-12 03:08:34
【问题描述】：

我遇到了一些非常奇怪的问题，我完全陷入困境。

我有这个组件：

<template>
  <v-card elevation="0">
    <h2>Accounts</h2>
    <v-simple-table fixed-header height="300px">
      <template v-slot:default>
        <thead>
          <tr>
            <th class="text-left">Account ID</th>
            <th class="text-left">Broker</th>
            <th class="text-left">Balance</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="account in accounts" :key="account.accountId">
            <td>{{ account.accountId }}</td>
            <td>{{ account.broker }}</td>
            <td>{{ accountBalances[account.accountId] }}</td>
          </tr>
        </tbody>
      </template>
    </v-simple-table>
  </v-card>
</template>

<script>
import { DB } from "../../firebase/db";

export default {
  name: "Accounts",
  data: () => ({
    cashTransactions: [],
    accounts: [],
    newAccount: []
  }),
  computed: {
    accountBalances: function() {
      try {
        let balances = {};
        this.accounts.forEach(account => {
          let accBal = 0;
          const transactions = this.cashTransactions.filter(acc => {
            return acc.accountId === account.accountId;
          });
          transactions.forEach(transaction => {
            accBal += Number(transaction.amount);
          });
          balances[account.accountId] = accBal;
        });
        return balances;
      } catch (err) {
        console.error(err);
        return err;
      }
    }
  },
  firestore: {
    cashTransactions: DB.collection("cashTransactions"),
    accounts: DB.collection("accounts")
  }
};
</script>

<style scoped></style>

这个firestore集合：

当我像这样在我的组件中定义 firestore 时：

  firestore: {
    cashTransactions: DB.collection("cashTransactions"),
    accounts: DB.collection("accounts")
  }

只有 accounts 属性是响应式的 - 例如，我将文档添加到集合中，它会实时更新（排序）。

如果我这样定义：

  data: () => ({
    accounts: [],
    cashTransactions: [],
    newAccount: []
  }),
  firestore: {
    accounts: DB.collection("accounts"),
    cashTransactions: DB.collection("accounts")
  }

也只有帐户是被动的。

如果我这样定义：

  data: () => ({
    accounts: [],
    cashTransactions: [],
    newAccount: []
  }),
  firestore: {
    accounts: DB.collection("cashTransactions"),
    cashTransactions: DB.collection("accounts")
  }

accounts 对 cashTransactions-collection-data 具有反应性，但 cashTransactions 属性（带有 accounts-collection-data）仍然没有反应性

如果我把它设置回

  data: () => ({
    accounts: [],
    cashTransactions: [],
    newAccount: []
  }),
  firestore: {
    accounts: DB.collection("accounts"),
    cashTransactions: DB.collection("cashTransactions")
  }

accounts 属性与 accounts-collection-data 反应，而 cashTransactions 属性保持非反应性

所以，无论我做什么，cashTransactions 属性都是非反应性的，只会在页面刷新时“刷新”。

有人知道我做错了什么吗？

谢谢！

【问题讨论】：

标签： javascript firebase vue.js google-cloud-firestore vuefire

【解决方案1】：

您可以在firestore():{} 之后尝试以下解决方法

watch: {
    cashTransactions(): {
        deep: true,
        handler(newArray) {
            console.log( 'Change detected...' );
        } 
    },
}

希望这会有所帮助。

【讨论】：