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

## Install firestore
> 進入Products.vue [color=black]
>
:baby_chick: return 一個 **allproducts:[]** 空數列，拿來存雲端的資料

 data(){
        return {
            allproducts:[],
            product:{
                name:null,
                price:null
            }
        }
    }

:baby_chick: **db.collection('雲端儲存名稱').get()**
:baby_chick: 注意下方獲得的 **doc** 須經過 **.data()** 轉換才能成為我們要運用的資料

readdata(){
            db.collection('products').get()
            .then((data) => {
            data.forEach((doc) => {
                this.allproducts.push(doc)
            })
        })
        }

:baby_chick: 使用v-for循環，並將資料經過 **.data()** 轉換

  <div class="datas" v-for="(singleP,index) in allproducts" :key="index">
    <div>名稱：{{ singleP.data().name }}  
        <span>價錢：{{ singleP.data().name }}  元</span>
    </div>
</div>