データを用意する

リストっぽいデータを用意したいので、「4.送信してみる編」で実装した送信ボタンを2,3回押してデータを増やそう。

fire-vue_–_Database_–_Firebase_console.png

画像を見ればわかると思うが、firebaseのdbにデータをpushすると、配列ではなく、一意のkeyが生成されてデータはそのkeyの中に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を始めよう 6.入力＆送信編