---
# System prepended metadata

title: Firestore 讀取資料get

---

# Firestore 讀取資料get
教學影片：[點這邊](https://www.youtube.com/watch?v=XKfNNUSvcHI&list=PLB4AdipoHpxYPjGo0n2m6tmCLud_iSEbv&index=32)





## Install firestore
>  進入Products.vue [color=black]
> 
 :baby_chick: return 一個 **allproducts:[]** 空數列，拿來存雲端的資料
 ```javascript=
 data(){
        return {
            allproducts:[],
            product:{
                name:null,
                price:null
            }
        }
    }
 ```
 :baby_chick: **db.collection('雲端儲存名稱').get()**
  :baby_chick: 注意下方獲得的 **doc** 須經過 **.data()** 轉換才能成為我們要運用的資料
```javascript=
readdata(){
            db.collection('products').get()
            .then((data) => {
            data.forEach((doc) => {
                this.allproducts.push(doc)
            })
        })
        }
```

  :baby_chick: 使用v-for循環，並將資料經過 **.data()** 轉換
  ```vue=
  <div class="datas" v-for="(singleP,index) in allproducts" :key="index">
    <div>名稱：{{ singleP.data().name }}  
        <span>價錢：{{ singleP.data().name }}  元</span>
    </div>
</div>
  ```