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

Posted 2023-02-22

【中文标题】firebase（firestore）和vuejs + vuefire的非常奇怪的反应性问题

【英文标题】：Very weird reactivity issue with firebase (firestore) and vuejs + vuefire

【发布时间】：2020-10-12 03:08:34

【问题描述】：

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

我有这个组件：

<template>
  <v-card elevation="0">
    <h2>Accounts</h2>
    <v-simple-table fixed-header >
      <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 属性都是非反应性的，只会在页面刷新时“刷新”。

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

谢谢！

【参考方案1】：

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

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

希望这会有所帮助。