データを用意する
リストっぽいデータを用意したいので、「4.送信してみる編」で実装した送信ボタンを2,3回押してデータを増やそう。
画像を見ればわかると思うが、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経験者はもうここからは自力で実装できるだろう。