---
# System prepended metadata

title: Firestore 儲存資料

---

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


## 創造一個firestore的資料
![](https://i.imgur.com/rWfCkp6.png)



## Install firestore
>  進入firebase.js [color=black]
```javascript
export const db = firebase.firestore();
```
    
## Import firestore
>  進入Products.vue [color=salmon]
```javascript
import { fb,db } from '../firebase.js'
```

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

:baby_chick: 將每個input綁定v-model
```html=
<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)
```javascript=
data(){
    return {
        product:{
            name:null,
            price:null
        }
    }
}
```
```javascript=
methods:{
    savedata(){
        db.collection('products').add(this.product)
        .then((docRef) =>{
            this.product.name = ''
            this.product.price = ''
        })
        .catch((err) => console.log(err))
    }
}
```
