Vue.js+Firebaseでデータベースから呼び出せない事象を解決した

目次

• Todoアプリを作ってます
• データベースに保存できていないことに気づいた
• 解決方法

Todoアプリを作ってます

まず初めに当事象は私(@watuyo_2)が作成している、Todoアプリにて発生しました。

もともとLocalStrageにデータを保存し、それをVue.jsのcreated時に読み込むような実装をしていました。

しかし、当たり前ですがGoogleユーザーごとではなくブラウザのキャッシュごとに保存される形式になるのでFirebaseに保存するように実装しました。

そこでFirebaseに保存されるはずが…

データベースから呼び出せてないことに気づいた

フォルダ構造はこんな感じです。

src
├── App.vue
├── components
│   ├── Home.vue
│   └── ToDo.vue
└── main.js

結論からお話すると、Firebaseから呼び出す(コンポーネントにデータを引き出す)際に必要なuserDataを読み込む実装をしていなかったことが原因でした。
なのでTodoページでは、何も取得できていませんでした。

これが誤ったコードです。

<template>
  <div id="app">
    <Home v-if="!isLogin"></Home>
    <ToDo v-if="isLogin"></Todo>
  </div>
</template>

<script>
import ToDo from './components/ToDo'
import Home from './components/Home'

export default {
  name: 'App',
  data() {
    return {
      isLogin: false,
    };
  },
  created: function () {
    firebase.auth().onAuthStateChanged(user => {
      console.log(user);
      if (user) {
        this.isLogin = true;
      } else {
        this.isLogin = false;
      };
    });
  },
  components: {
    ToDo: ToDo,
    Home: Home
  }
}
</script>

isLoginとFirebaseに格納したログインデータを引き渡せていません。

解決方法

コードの正誤表はこちら。

正しいコードは以下。

<template>
  <div id="app">
    <Home v-if="!isLogin"></Home>
    <ToDo v-if="isLogin" :user="userData"></Todo>
  </div>
</template>

<script>
import ToDo from './components/ToDo'
import Home from './components/Home'

export default {
  name: 'App',
  data() {
    return {
      isLogin: false,
      userData: null
    };
  },
  created: function () {
    firebase.auth().onAuthStateChanged(user => {
      console.log(user);
      if (user) {
        this.isLogin = true;
        this.userData = user;
      } else {
        this.isLogin = false;
        this.userData = null;
      };
    });
  },
  components: {
    ToDo: ToDo,
    Home: Home
  }
}
</script>

isLogin状態で表示されるTodo.vueを表示する際にログインデータに当たるuserDataを受け渡す実装(:user="userData")を追加しました。
更にcreatedフックにログイン状態によってuserDataを与えるかnullにするかを実装しました。
これでユーザごとに適切なデータを表示できます。

ちなみにcreatedフックはページが読み込まれるたびにデータを更新するので、常に最新のデータを反映できます。
詳しくはVueインスタンスのライフサイクルについて公式ドキュメントを御覧ください。

感想

かなり初歩的な部分で躓いていました。
データの流れを順に追えば簡単な話ですね。

しかし、これでFirebaseのデータベースに好きなデータを保存する事ができるようになりました。
次からは間違いなく実装するぞ！！！