Vue.js X Firebase

kyj2471·2021년 1월 24일
0

Vue.js

목록 보기
6/8

firestore

firebase의 데이터베이스에는 크게 두개가있다.
하나는 realtime database이고
하나는 firestore입니다.
이번에 firestore를 이용해보았습니다.

firestore에 데이터 전송 및 받아오기

데이터 추가하기

getData(e){
	firebase.firestore().collection("data테이블 이름").add({
    	username:this.username,
        comname:this.comname,
        content:this.content,
        phonenumber:this.phonenumber,
       });
       this.visible = false
      },        

위의 코드에서처럼 하면 원하는 데이터 테이블에 내가 추가를 했으면 하는 값들을 설정해 줌으로 데이터를 추가할 수 있다.
이때 당연히 < script >및에
import firebase, {firestore} from "firebase"를 해줘야한다!

데이터 불러오기

async read() {
const snap = await firebase.firestore().collection("data테이블 이름).get()
this.items = snap.docs.map((v) => {
const item = v.data();
return{
	username:this.username,
        comname:this.comname,
        content:this.content,
        phonenumber:this.phonenumber,
        }
       })
      },

이런식으로 데이터를 불러오고 data-source에 items를 넣어줌으로서 데이터를 불러올 수 있다.

profile
[ frontend-developer ]

0개의 댓글