Nuxt.jsの基礎勉強-firebaseと連携したToDoアプリ2-

firebase Vue.js Nuxt.js

はじめに

今回は前回の記事の続きを記述していく。

page側でfirebaseにあるデータを取得して表示

  • idをキーに指定して、v-forを用いてtodosを展開することで表示することができる
        <ul>
            <li v-for="todo in todos" :key="todo.id">
                <span v-if="todo.created">
                            (略)
                    <span v-bind:class="{ done: todo.done }">
                        {{ todo.name }},
                        {{ todo.created.toDate() | dateFilter}}
                    </span>
                            (略)
                </span>
            </li>
        </ul>
                            (略)
<script>
    computed: {
        todos(){
            return this.$store.state.todos.todos
        }
</script>

<style>
li> span> span.done{
    text-decoration: line-through;
}
</style>>

remove処理の追加

storeにremove処理を記述

  • ~/store/todos.jsのexport const actionsにremove:を追加
  • フォームからidを取得してきて、渡されたidを元にデータベース側の値をdelete()で消している。
    remove: firestoreAction((context, id) => {
        todosRef.doc(id).delete()
    }),

page側で出力

  • ボタンを作成して、methodsからremoveメソッドを読み込んでいる
            <li v-for="todo in todos" :key="todo.id">
                <span v-if="todo.created">
                    （略）
                    <button @click="remove(todo.id)">Delete</button>
                </span>
            </li>
  • methods内にてactionにidの値を渡している。
        remove(id){
            this.$store.dispatch('todos/remove', id)
        },

checkboxの追加

storeにてtoggleの操作を記述

  • ~/store/todos.jsのexport const actionsにてtoggleの処理について記述
  • 真偽値なのでボタンが押されたら値を反転すれば良い
    remove: firestoreAction((context, id) => {
        todosRef.doc(id).delete()
    }),

page側でtoggle処理のactionを読み込み

  • ~/page/todos.vueのtemplateにてmethodsのtoggleに値を渡している
                    <input type="checkbox" :checked="todo.done" @change="toggle(todo)">
  • ~/page/todos.vueのmethosにてtoggleの現在の値をアクションに渡している
        toggle(todo){
            this.$store.dispatch('todos/toggle', todo)
        }

フォーマットの変更

momentを用いた時間の成形

  • momentをインストールする
$ npm install --save moment
  • ~/page/todos.vueにフィルターを作って{{ todo.created.toDate() | dateFilter}}にフィルターをかける
    filters: {
        dateFilter: function(date){
            return moment(date).format('YYYY/MM/DD HH:mm')
        }
    }

lodashを用いたソート

  • ~/nuxt.config.jsにwebpackをrequireして以下を記述
const webpack = require('webpack')

export default {

(中略)

  /*
  ** Build configuration
  ** See https://nuxtjs.org/api/configuration-build/
  */
  build: {
    plugins: [
      new webpack.ProvidePlugin({
        '_': 'lodash'
      })
    ]
  }
  • ~/store/todos.jsの最下部に以下を記述
export const getters = {
    orderdTodos: state => {
        return _.sortBy(state.todos, 'created')
    }
}

終わりに

今回はfirebaseと連携を行なったため、新しい記述の仕方が多くて写経するので精一杯であったが、ブログにアウトプットすることでしっかりソースコードを追えたのはいいことだと思う。