Vue.js + Firebase에서 데이터베이스에서 호출 할 수없는 이벤트를 해결했습니다.

목차

Todo 앱을 만들고 있습니다

데이터베이스에 저장할 수 없다는 것을 깨달았습니다.

해결 방법

Todo 앱을 만들고 있습니다.

우선 처음에 이 이벤트는 나 (@watuyo_2) 가 작성하고 있는 Todo 앱 에서 발생했습니다.

원래 LocalStrage에 데이터를 저장하고 Vue.js를 만들 때 읽는 것과 같은 구현을했습니다.

하지만 당연하지만 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 hook은 페이지가로드 될 때마다 데이터를 업데이트하므로 항상 최신 데이터를 반영 할 수 있습니다.
자세한 내용은 Vue 인스턴스의 라이프사이클에 대해 공식 문서을 참조하십시오.

감상

꽤 초보적인 부분에서 망설였다.
데이터의 흐름을 순서대로 쫓으면 간단한 이야기군요.

그러나 이제 Firebase 데이터베이스에 원하는 데이터를 저장할 수 있습니다.
다음부터는 확실히 구현할거야! ! !