Vue.js로 Firebase를 시작하겠습니다.목록 보기

데이터 준비

리스트와 같은 데이터를 준비하고 싶으므로'4. 발송 시도편'에 설치된 발송 버튼을 2, 3회 눌러 데이터를 늘리세요.

데이터push를 Firebase의db에 저장하면 그룹이 아니라 유일한 키를 생성하고 데이터를object로 이 키에 저장합니다.따라서 사용 시 사용for in 등을 배열로 바꿔야 한다.

서버의 최신 상태를 모니터링하고 가져오는 구조

데이터가 바뀔 때마다 호출on('value')

firebase.database().ref('myBoard/').on('value', snapshot => {
  if (snapshot) {
    // snapshotで最新状態を取得する
    console.log(snapshot.val())
    /*
      {
        "-Kx9UuIXJh4LTcShCiF3": {
          "message": "foo",
          "name":"test"
        }, ...
      }
     */
  }
})

서버에서 가져온 데이터를 Vue 데이터로 복사

export default {
  data () {
    return {
      list: [] // 最新状態はここにコピーされる
    }
  },
  methods: {
    listen () {
      firebase.database().ref('myBoard/').on('value', snapshot => {
        if (snapshot) {
          const rootList = snapshot.val()
          let list = []
          // データオブジェクトを配列に変更する
          Object.keys(rootList).forEach((val, key) => {
            rootList[val].id = val
            list.push(rootList[val])
          })
          // vueのdataに突っ込む
          this.list = list
        }
      })
    },
  }
}

template에 목록 표시

<ul>
  <li v-for="item in list">{{item.name}} / {{item.message}}</li>
</ul>

이렇게 하면 목록이 렌더링될 것이다

지금까지의 코드 전모

<template>
  <div id="app">

  <!-- ボタン類 -->
  <div>
    <button type="button" class="btn btn-default" @click="login">
      匿名ユーザーでログイン
    </button>
    <button type="button" class="btn btn-default" @click="pushData">
      送信
    </button>
  </div>

  <!-- リスト -->
  <div>
    <ul>
      <li v-for="item in list">{{item.name}} / {{item.message}}</li>
    </ul>
  </div>

  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      list: []  // 最新状態はここにコピーされる
    }
  },
  created () {
    // 認証チェック
    firebase.auth().onAuthStateChanged( user => {
      if (user) {
        console.log('ログイン状態.')
        this.listen()
      } else {
        console.log('ログインしていない状態')
      }
    })
  },
  methods: {
    // ログイン関数
    login () {
      firebase.auth().signInAnonymously().then(e => {
        console.log(e)
        this.listen()
      }).catch((error) => {
        // ログインのエラーメッセージ
        var errorCode = error.code;
        var errorMessage = error.message;
        console.log('ログインエラーメッセージ', errorCode, errorMessage)
      });
    },
    // データベースの変更を購読、最新状態をlistにコピーする
    listen () {
      firebase.database().ref('myBoard/').on('value', snapshot => {
        if (snapshot) {
          const rootList = snapshot.val()
          let list = []
          Object.keys(rootList).forEach((val, key) => {
            rootList[val].id = val
            list.push(rootList[val])
          })
          this.list = list
        }
      })
    },
    // ダミーデータをfirebaseに送信
    pushData () {
      firebase.database().ref('myBoard/').push({
        name: 'test',
        message: 'foo'
      })
    }
  }
}
</script>

다음은 가상 데이터가 아니라 입력한 것을 서버에 보내는 부분을 만드는 것이다.vue.js 경험이 있는 사람은 이곳에서 이미 스스로 설치할 수 있겠지.
Vue.js로 Firebase를 시작하겠습니다.입력 & 발송편