Store memos to Firebase's Realtime Database (RTDB)

Author: nikukyugamer

src/components/Editor.vue

@@ -24,6 +24,9 @@
         <button class="deleteMemoBtn" v-if="memos.length > 1" @click="deleteMemo">
           選択中のメモの削除
         </button>
+        <button class="saveMemoBtn" @click="saveMemos">
+          メモを保存する
+        </button>
       </div>
       <textarea class="markdown" v-model="memos[selectedIndex].markdown"></textarea>
       <div class="preview" v-html="preview()"></div>
@@ -49,6 +52,17 @@ export default {
       selectedIndex: 0
     }
   },
+  created: function() {
+    firebase
+      .database()
+      .ref('memos/' + this.user.uid)
+      .once('value') // 一回だけ、読み込みに利用することを指定している
+      .then(result => {
+        if (result.val()) {
+          this.memos = result.val()
+        }
+      })
+  },
   methods: {
     logout: function() {
       firebase.auth().signOut()
@@ -72,6 +86,12 @@ export default {
       if (this.selectedIndex > 0) {
         this.selectedIndex--
       }
+    },
+    saveMemos: function() {
+      firebase
+        .database()
+        .ref('memos/' + this.user.uid)
+        .set(this.memos)
     }
   }
 }
@@ -111,6 +131,10 @@ export default {
   margin-top: 20px;
 }
 
+.deleteMemoBtn {
+  margin: 10px;
+}
+
 .markdown {
   width: 40%;
   height: 500px;