Nuxt + Firestore やってみた

目的

新年度となるので、保育園の新担任の予想を投稿して、共有するアプリを作った。

いつもReact x Firebase はやるけど、Nuxt でやったことなかったのでやってみた。

GitHub - okadakk/class-devide

Firebase関連のところだけ

~/plugin/firebase.js

import firebase from 'firebase/app'
import 'firebase/firestore';
import 'firebase/analytics'

if (!firebase.apps.length) {
  firebase.initializeApp({
     // 設定を記載
  })
}

// 無駄にanalyticsもONにしてみた。
firebase.analytics();

export default firebase

~/store/index.js

import Vue from 'vue';
import firebase from "~/plugins/firebase.js";
const db = firebase.firestore();

export const actions = {
  initItems (context) {
    db.collection("items").orderBy("like", "desc").get()
      .then(querySnapshot => {
        querySnapshot.forEach((doc) => {
          context.commit('addItem', {
            id: doc.id,
            item: doc.data()
          });
        });
      })
      .catch((error) => {
          console.log("Error getting documents: ", error);
      });
  },
  fetchItem (context, id) {
    db.collection("items").doc(id).get()
      .then(doc => {
        const data = doc.data();
        context.commit('setTitle', data.title);
        context.commit('setSelectedUsers', data.users);
      })
      .catch((error) => {
          console.log("Error getting documents: ", error);
      });
  },
  deleteItem (context, id) {
    context.commit('removeItem', id);

    db.collection("items").doc(id).delete().then(function() {
      console.log("Document successfully deleted!");
    }).catch(function(error) {
        console.error("Error removing document: ", error);
    });
  },
  async addLike(context, param) {
    await db.collection('items').doc(param.id).update({
      like: param.count + 1
    });
  }
}

やっぱりFirebaseは楽！楽しくなって、無駄にいいね機能とかもつけた！

しかし、３日後担任が発表されたので開発から3日でお蔵入り...悲しい。