firestore新增資料

通常可能會想幫使用者儲存一些個人資訊，這時候，我們可以利用firestore來儲存這些資訊。

• Add data to Cloud Firestore

可以利用setDoc()新增資料，可以自訂document id。

import { doc, setDoc } from "firebase/firestore"; 

// Add a new document in collection "cities"
await setDoc(doc(db, "cities", "LA"), {
  name: "Los Angeles",
  state: "CA",
  country: "USA"
});

當沒有提供document id時，會自動產生文件並產生文件id。

import { collection, doc, setDoc } from "firebase/firestore"; 

// Add a new document with a generated id
const newCityRef = doc(collection(db, "cities"));

// later...
await setDoc(newCityRef, data);

也可以利用addDoc()新增資料。

import { collection, addDoc } from "firebase/firestore"; 

// Add a new document with a generated id.
const docRef = await addDoc(collection(db, "cities"), {
  name: "Tokyo",
  country: "Japan"
});
console.log("Document written with ID: ", docRef.id);

使用者介面

我們修改一下註冊頁面，新增一個姓名欄位

const account = reactive({
  **name: '',**
  email: '',
  password: ''
})

<template>
  <v-container>
    **<v-text-field v-model="account.name" label="姓名"></v-text-field>**
    <v-text-field v-model="account.email" label="帳號"></v-text-field>
    <v-text-field v-model="account.password" label="密碼" type="password"></v-text-field>
    <v-alert :type="state.status" title="訊息" :text="state.message"></v-alert>
    <v-btn color="primary" @click="handleClick('signIn')">登入</v-btn>
    <v-btn color="secondary" @click="handleClick('signOut')">登出</v-btn>
    <v-btn color="primary" @click="handleClick('signUp')">註冊</v-btn>
  </v-container>
</template>

setDoc()

import { doc, getFirestore, setDoc } from 'firebase/firestore';

const auth = getAuth(app)
**const db = getFirestore(app);**

新增資料有兩個方法:addDoc()、setDoc()，當我們要讓firestore產生document的id，就使用addDoc()，因為我們要利用uid作為document的id，所以，使用setDoc()

透過setDoc()新增一筆資料，並利用uid作為document的id，未來方便我們取得資料。

      state.message = '註冊中...'
      const res = await createUserWithEmailAndPassword(auth, account.email, account.password)
      const uid = res.user.uid;
      **await setDoc(doc(db, "user", uid), {
        name: account.name
      });**
      if (res.user) {
        state.status = 'success'
        state.message = '註冊成功'
      }