Nuxt.js + FirebaseでTODOアプリを作ってみる #Todoアプリ

概要

Nuxt.js + FirebaseでTODOアプリを作ってみた時のメモをちゃんと残そうと編集したもの。
作ってみた動機は、「とにかくFirebase連携してみたかった」。
新卒二年目の5月くらいに作ったぽい。（現在二年目を終えようとしている）

環境

Nuxt.js
Firebase

作ったときの考え方の流れ

ひとまずリロードしたら消えてしまうTODOアプリを作ってみる
- HTMLの<form>って何だっけ…？くらいのレベルからはじまった・・
store で状態管理するようにする
- store の state / action / mutation
- getters
Firebaseにデータを送信する
- Firebaseアクセスの基本構文を勉強した
Firebaseからデータを取得する

実際のコードと手順

HTML部分

vue.js



<template lang="pug">

  .wrapper
    p.title TODO APP
    ul.todo
      li(
        v-for="(todo, index) in todos"
        :key = "index"
        @click="deleteTodo(index)"
      )
        | {{ todo.todo }}

    form.form(
      @submit.prevent="submitTodo"
    )
      input(
        v-model="todo"
        type='text'
        placeholder="Add a TODO"
      )
      button(
        type='submit'
      )
        | Add a TODO

</template>

こんなかんじ。

script

<script>
export default {
  async fetch ({ store }) {
    // fetchは、Vuex storeにデータを格納する
    await store.dispatch('common/getTodos')
  },
  data() {
    return {
      todo: ""
    }
  },
  computed: {
    todos() {
      return this.$store.getters['common/todos']
    }
  },
  mounted() {
    this.$store.dispatch('common/getTodos')
  },
  methods: {
    submitTodo() {
      if(this.todo) {
        this.$store.dispatch('common/submitTodo', this.todo)　// commitじゃなくてdispatch
        this.todo = ""
      }
    },
    deleteTodo(index) {
      this.$store.dispatch('common/deleteTodo', this.todos[index].id)
      this.$store.dispatch('common/getTodos')
    }
  }
}
</script>

作ってみて

storeとか、ライフサイクルの勉強になった
- とはいえ、ある程度ライフサイクルを理解していないと全然分からなかったと思う。
- 例えば、ページリロードしてもFirebaseにあるリストが表示できなかったんだけど、あこれ mounted() でgetTodos()（データ取得をまとめた関数）呼び出したらいけるんじゃね？とかが思いつけたけど、ライフサイクルを理解してなかったら思いつかなかったと思う。
Netlifyでデプロイはできなかったあ
- エラーが出てたのは、Firebaseだけだったから、Firebaseの権限周りかも…？
- 環境変数で管理してるし、edファイルはgitignoreしてるし。
- アカウント連携させたアプリを作ってみて、またデプロイできるかやってみよう

たしかこの記事を参考にした

編集後記

参考にした記事をちゃんと残してなかったから過去の自分にグーパンチ
わざわざNuxtでやる必要もないのではないのではないか
- この一年で、開発環境は最小限に！シンプルイズベスト！なきもちになった
いきなりNuxtだったから、Vue.jsでやってみたい