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

## 創造一個firestore的資料

## Install firestore
> 進入firebase.js [color=black]

export const db = firebase.firestore();

## Import firestore
> 進入Products.vue [color=salmon]

import { fb,db } from '../firebase.js'

## 綁定輸入資料到 v-model
> 進入Products.vue [color=salmon]

:baby_chick: 將每個input綁定v-model

<div class="products">
    <div class="product-test">
        <div class="form-group">
            <input type="text" placeholder="name" v-model="product.name" class="form-control">
        </div>
        <div class="form-group">
            <input type="text" placeholder="price" v-model="product.price" class="form-control">
        </div>
        <div class="form-group">
            <button @click="savedata" class="btn btn-primary">Save</button>    
        </div>
    </div>
</div>

## 創造 data & methods
> 進入Products.vue [color=salmon]
>
:baby_chick: 以 object 包裝 v-model 輸入的資料
:baby_chick: 點選按鈕後啟動 savedata()
:baby_chick: 使用 db.collection('雲端儲存名稱').add(本地要儲存的東西).then(存完之後要幹嘛，***例如重置輸入內容***).catch(err)

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

methods:{
    savedata(){
        db.collection('products').add(this.product)
        .then((docRef) =>{
            this.product.name = ''
            this.product.price = ''
        })
        .catch((err) => console.log(err))
    }
}