NuxtどころかVueもJsも、プログラミングも超絶初心者な私が頑張ってNuxt.jsを使ってtodoアプリを模写？してみました。

参考にしたのはこちらのサイト。ほんまにありがとう…感謝しかありません。インターネット万歳。
https://www.boel.co.jp/tips/vol107/

初心者ゆえ、言い回しや誤ったやり方などあると思いますが、お気づきの際は教えていただけますと幸いです！

さて以下備忘録。

まずは情報設計

iPadを使ってラフに描いてみました。
使用したのはConceptというアプリ。ベクターデータなのでズームしても線がボケないのが気に入っています。

職場ではbacklogを使っているので、それに習ってカテゴリを追加したり、ステータスの文言を変えてみることにしました。多分このくらいのカスタマイズが私の限界と思われ…

雛形作成

pagesディレクトリにtodo.vueを作成して、雛形を作る。
Vuetifyを使っているのでこのようにしました。
headerやfooterはコンポーネント化して別のファイル（Header.vue/Footer.vue）にて編集しています。

todo.vue

<template>
  <div>
    <Header />
    <v-container>
      <h2>TO DO List</h2>
    </v-container>
    <v-container>
      <v-form>
        <v-row align="center">
          <v-col class="d-flex" cols="12" sm="6">
            <v-text-field label="the thing to do" required></v-text-field>
          </v-col>
          <v-col class="d-flex" cols="12" sm="6">
            <v-btn class="primary">ADD</v-btn>
            <!-- <Button :small="false" color="primary" :click="deleteItem(index)">
              Add
            </Button> -->
          </v-col>
        </v-row>
        <v-select :items="items" label="Category" style="width: 250px">
        </v-select>
      </v-form>
    </v-container>

    <v-container>
      <div class="filter">
        <v-row align="center" class="mb-6">
          <v-spacer></v-spacer>
          <v-col
            v-for="state in status"
            :key="state.name"
            class="pa-2"
            cols="auto"
          >
            <!-- <v-col
              v-for="state in status"
              :key="state.name"
              class="d-flex justify-space-between"
              sm="1"
            > -->
            <v-btn text elevation="0">{{ state }}</v-btn>
          </v-col>
          <v-spacer></v-spacer>
        </v-row>
      </div>
    </v-container>
    <v-container>
      <v-simple-table fixed-header height="400px">
        <template>
          <thead>
            <tr>
              <th class="text-left">TO DO</th>
              <th class="text-left">REGISTERE</th>
              <th class="text-left">STATUS</th>
              <th>BUTTON</th>
            </tr>
          </thead>
          <tbody>
            <!-- <tr v-for="value in values" :key="value.name"> -->
            <tr>
              <td>TEST</td>
              <td>2021-05-30 17:00</td>
              <td><v-btn outlined>OPEN</v-btn></td>
              <td><v-btn outlined color="error">DELETE</v-btn></td>
            </tr>
          </tbody>
        </template>
      </v-simple-table>
    </v-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['TASK', 'BUG', 'ORDER', 'OTHER'],
      status: ['All', 'Open', 'In progress', 'Resolved', 'Closed'],
    }
  },
}
</script>

Vuexストアを作成

まずVuexストアを作成…とあるのだが、まずここでつまずいた。
そもそもVuexってなんやねん！
調べてみると、共通データを保管できる仕組み？らしい？
参考サイトではクラシックモードを使っているとかなんとかで、ESLintでは

Classic mode for store/ is deprecated and will be removed in Nuxt 3

「そのモード、Nuxt3ではなくなるで、カス」
と言われる（被害妄想）。

どうやらStoreもハブ（index.js）と、モジュールに分けて管理するようです。んで、Nuxt3ではわざわざ取ってこい！ってちまちま書かんでもStore内のモジュールは簡単な書き方で勝手に取ってきてくれるっぽい？

Vuexストアのステートはアプリケーション全体の状態を保持するオブジェクトです。アプリケーション全体で使用される情報をステートで管理すると保守性が高まります。たとえば、ログイン中のユーザー情報、ECサイトにおける商品情報、ユーザーの端末情報など複数の場所で使用される可能性のあるデータはステートで管理するとよいです。

参考サイト：　Vuexのステートの使い方を覚えて状態を管理しよう｜Vuex

そんなわけで
Nuxt公式見つつVuex公式見つつ、エイヤっと見よう見真似で書いてみる。

Store/index.ｊｓにstateを関数で、mutationをオブジェクトとしてexport

はじめに、ステートを関数で、ミューテーションとアクションをオブジェクトでエクスポートしましょう。
by 公式

クラシックモードでは

index.js

const store = new Vuex.Store({
  // ステートを定義
  state: {
    unco: 1
  }
})

と書かなければいけなかったところは、モジュールモードでは

index.js

export const state = () => ({
  unco: 1,
})

でOKとなった模様。
はてmutationとはなんぞや？と公式を読んでいたのですが、storeの状態を変更する関数？みたいなもので、イベントに近いものらしい。ん？ってことは今は配列を格納したいだけだから、mutationはいらないのか？

というわけで、
store/index.js

index.js

export const state = () => ({
  todos: [],
})

store/todo.js

todo.js

export const state = () => ({
  todos: [
    {
      content: 'テスト',
      created: '2021-06-15 17:00',
      category: 'task',
      status: '作業前',
    },
    {
      content: 'テスト',
      created: '2021-06-15 17:00',
      category: 'task',
      status: '作業前',
    },
    {
      content: 'テスト',
      created: '2021-06-15 17:00',
      category: 'task',
      status: '作業前',
    },
  ],
})

これでどうやろか？

storeの情報はページに表示されるのか…？

次はストアの情報がページに表示されるように頑張ってみる。えいえいおー

pagesディレクトリのtodo.vueに、仮で入力したタスクのリスト部分を以下のように変更。

todo.vue

        <template>
          <thead>
            <tr>
              <th class="text-left">TO DO</th>
              <th class="text-left">REGISTERED</th>
              <th class="text-left">CATEGORY</th>
              <th class="text-left">STATUS</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="todo in todos" :key="todo.name">
              <td>{{ todo.content }}</td>
              <td>{{ todo.created }}</td>
              <td>
                <v-btn outlined>{{ todo.category }}</v-btn>
              </td>
              <td>
                <v-btn outlined>{{ todo.status }}</v-btn>
              </td>
              <td>
                <v-btn outlined color="error">DELETE</v-btn>
              </td>
            </tr>
          </tbody>
        </template>

んでもって$storeからtodosのデータを取って来ます。

todo.vue

<script>
export default {
  data() {
    return {
      items: ['TASK', 'BUG', 'ORDER', 'OTHER'],
      status: ['All', 'Open', 'In progress', 'Resolved', 'Closed'],
    }
  },
  computed: {
    todos() {
      return this.$store.state.todo2.todos
    },
  },
}

// console.log(JSON.stringify(this.$store.state.todo2.todos))
</script>

やったー！！

「タスクの追加」機能の実装

登録された日時を取得して整形した上でcreatedに代入し、入力されたタスクをcontentに入れる処理をstore/todo.jsに記述。

vuejs;store/todo.js


export const mutations = {
  insert(state, obj) {
    // Mon Jun 21 2021 11:32:57 GMT+0900 (日本標準時)
    const d = new Date()
    const fmt =
      d.getFullYear() +
      '-' +
      ('00' + (d.getMonth() + 1)).slice(-2) +
      '-' +
      ('00' + d.getDate()).slice(-2) +
      '-' +
      ('00' + d.getHours()).slice(-2) +
      '-' +
      ('00' + d.getMinutes()).slice(-2)
    state.todos.unshift({
      content: obj.content,
      created: fmt,
      cats: obj.cats,
      status: 'OPEN',
    })
  },
}

input（v-text-field）とselect(v-select),button(v-btn)にはv-modelを追加。

pages/todo.vue

      <v-form>
        <v-row align="center">
          <v-col class="d-flex" cols="12" sm="6">
            <v-text-field v-model="content" label="the thing to do" required>
            </v-text-field>
          </v-col>
        </v-row>
        <v-row align="center">
          <v-col class="d-flex" cols="12" sm="6">
            <v-select
              v-model="selectCat"
              :items="cats"
              label="Category"
              style="width: 250px"
              required
            >
            </v-select>
          </v-col>
          <v-col class="d-flex" cols="12" sm="6">
            <v-btn class="primary" @click="insert">ADD</v-btn>
          </v-col>
        </v-row>
      </v-form>

v-model属性で、inputに入力されたタスクをcontentと紐づけ(データバインディング)。

select(カテゴリー選択)については、v-modelには「選択したセレクトボックスの値を格納する変数」を指定しています。
データの初期値も追加。

todo.vue

<script>
  data() {
    return {
      content: '',
      selectCat: '',
      cats: ['TASK', 'BUG', 'ORDER', 'OTHER'],
      status: ['ALL', 'OPEN', 'IN PROGRESS', 'RESOLVED', 'CLOSED'],
    }
</script>

button(v-btn)については、v-on属性で要素にイベントを設定しています。クリックイベントの設定には、 v-on:click を使います。v-onは「@」と省略できるため、ここでは v-on:click を @click と書いています。

このv-on属性で、ボタンにクリックイベントを設定し、methodsのinsertを呼び出し。

私の場合、storeのmutations呼び出しにはstoreに名前空間（todo）を設定しているので、呼び出し先にも名前空間の指定が必要です。storeの名前がindex.jsであればこの名前空間の指定は不要。

pages/todo.vue

<script>

  methods: {
    insert() {
      // 空のタスクが入力されないように
      if (this.content !== '') {
        this.$store.commit('todo/insert', {
          content: this.content,
          cats: this.selectCat,
        })
        // 入力欄を空に
        this.content = ''
        this.selectCat = ''
      }
    },
  },
</script>

mutationについて捕捉

実際に Vuex のストアの状態を変更できる唯一の方法は、ミューテーションをコミットすることです。Vuex のミューテーションはイベントにとても近い概念です: 各ミューテーションはタイプとハンドラを持ちます。ハンドラ関数は Vuex の状態（state）を第1引数として取得し、実際に状態の変更を行います:
ミューテーション｜Vuex

ボタンの位置とか若干変えたので、ひとまずここまでのpages/todo.vueの内容全部

todo.vue

<template>
  <div>
    <Header />
    <v-container>
      <h2>TO DO List</h2>
    </v-container>
    <v-container>
      <v-form>
        <v-row align="center">
          <v-col class="d-flex" cols="12" sm="6">
            <v-text-field v-model="content" label="the thing to do" required>
            </v-text-field>
          </v-col>
        </v-row>
        <v-row align="center">
          <v-col class="d-flex" cols="12" sm="6">
            <v-select
              v-model="selectCat"
              :items="cats"
              label="Category"
              style="width: 250px"
              required
            >
            </v-select>
          </v-col>
          <v-col class="d-flex" cols="12" sm="6">
            <v-btn class="primary" @click="insert">ADD</v-btn>
          </v-col>
        </v-row>
      </v-form>
    </v-container>

    <v-container>
      <div class="filter">
        <v-row align="center" class="mb-6">
          <v-spacer></v-spacer>
          <v-col
            v-for="state in status"
            :key="state.name"
            class="pa-2"
            cols="auto"
          >
            <v-btn text elevation="0">{{ state }}</v-btn>
          </v-col>
          <v-spacer></v-spacer>
        </v-row>
      </div>
    </v-container>
    <v-container>
      <v-simple-table fixed-header height="400px">
        <template>
          <thead>
            <tr>
              <th class="text-left">TO DO</th>
              <th class="text-left">REGISTERED</th>
              <th class="text-left">CATEGORY</th>
              <th class="text-left">STATUS</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="todo in todos" :key="todo.name">
              <td>{{ todo.content }}</td>
              <td>{{ todo.created }}</td>
              <td>
                <v-btn outlined>{{ todo.cats }}</v-btn>
              </td>
              <td>
                <v-btn outlined>{{ todo.status }}</v-btn>
              </td>
              <td>
                <v-btn outlined color="error">DELETE</v-btn>
              </td>
            </tr>
          </tbody>
        </template>
      </v-simple-table>
    </v-container>
  </div>
</template>

<script>
// import { mapState } from 'vuex' 不要

export default {
  data() {
    return {
      content: '',
      selectCat: '',
      cats: ['TASK', 'BUG', 'ORDER', 'OTHER'],
      status: ['ALL', 'OPEN', 'IN PROGRESS', 'RESOLVED', 'CLOSED'],
    }
  },
  computed: {
    todos() {
      return this.$store.state.todo2.todos
    },
  },
  methods: {
    insert() {
      // 空のタスクが入力されないように
      if (this.content !== '') {
        this.$store.commit('todo2/insert', {
          content: this.content,
          cats: this.selectCat,
        })
        // 入力欄を空に
        this.content = ''
        this.selectCat = ''
      }
    },
  },
}

// console.log(JSON.stringify(this.$store.state.todo2.todos))
</script>

削除機能の追加

追加したタスクの削除機能を実装します。
まずはstore/todo.jsのmutationに以下を追加。

store/todo.js

  remove(state, obj) {
    for (let i = 0; i < state.todos.length; i++) {
      const ob = state.todos[i]
      if (ob.content === obj.content && ob.created === obj.created) {
        if (confirm('Are you sure to delete "' + ob.content + '" ?')) {
          state.todos.splice(i, 1)
          return
        }
      }
    }
  },

削除ボタンが押された際、todosに登録されている全てのtodoからcontentかつcreatedが一致する内容を探し、comfirmを出した上でtodosから削除します。

続きましてpages/todo.vueにてボタンにイベントを追加します。

pages/todo.vue

<v-btn outlined color="error" @click="remove(todo)"
　　>DELETE
</v-btn>

最後に、methodにremove　functionを実装

pages/todo.vue


<script>
  methods: {
    insert() {
      if (this.content !== '') {
        this.$store.commit('todo2/insert', {
          content: this.content,
          cats: this.selectCat,
        })
        this.content = ''
        this.selectCat = ''
      }
    },
    remove(todo) {
      this.$store.commit('todo2/remove', todo)
    },
  },
</script>

todoｓに登録されたタスクがdeleteで消せるようになりました！

「タスクの状態変更」機能の実装

①それぞれの状態を数字で定義
　→　store/todo.jsでstateのtodosの下にoptionを追加。

store/todo.js

<script>
  option: [
    { id: 0, label: 'OPEN' },
    { id: 1, label: 'IN PROGRESS' },
    { id: 2, label: 'RESOLVED' },
    { id: 3, label: 'COMPLETED' },
  ],
</script>

stateの状態を変えられるのはmutationなので、このstateを変えるfunctionをmutaionに追加します。

store/todo.js

<script>
  changeState(state, obj) {
    console.log('store changeState')
    // console.log(JSON.stringify(obj))
    // todosの中から該当のtodoを探して
    for (let i = 0; i < state.todos.length; i++) {
      const ob = state.todos[i]
      // console.log(JSON.stringify(ob))
      if (
        ob.content === obj.content &&
        ob.created === obj.created &&
        ob.status === obj.status
      ) {
        // console.log('object match!')
        // 現在のstatus idを割り振る
        let nowState
        for (let j = 0; j < state.option.length; j++) {
          if (state.option[j].label === ob.status) {
            nowState = state.option[j].id
          }
        }
        // 現在＋1のid statusにチェンジ
        nowState++
        // idの最後でidを振り出し（0）に
        if (nowState >= state.option.length) {
          nowState = 0
        }
        // idのラベルを表示
        obj.status = state.option[nowState].label
        return
      }
    }
  },
</script>

Mutationを追加したらお決まり、イベントをつける場所（今回はステータスボタン）に仕掛けを付与

pages/todo.vue

<script>
  <td>
    <v-btn outlined @click="changeState(todo)">
      {{ todo.status }}
    </v-btn>
  </td>
</script>

最後にmethodを追加
※removeの下

pages/todo.vue

<script>
  changeState(todo) {
    this.$store.commit('todo2/changeState', todo)
  },
</script>

せっかくなので、元記事にあるようにステータスに合わせてボタンのスタイルを変えてみようと思います。

pages/todo.vue

<script>

  <v-btn
    outlined
    :class="{
      openbtn: todo.status === 'OPEN',
      progressbtn: todo.status === 'IN PROGRESS',
      resolvebtn: todo.status === 'RESOLVED',
      closebtn: todo.status === 'CLOSED',
    }"
    @click="changeState(todo)"
  >
    {{ todo.status }}
  </v-btn>

</script>

末尾にはスタイルを追加

pages/todo.vue

<style scoped>
.openbtn {
  color: #e91e63;
}
.progressbtn {
  color: #2196f3;
}
.resolvebtn {
  color: #3f51b5;
}
.closebtn {
  color: #009688;
}
</style>

さらっと書いてみましたが、これ実はめちゃくちゃ時間かかった…
スタイルバインディングをして動的にクラスを制御しています。

ESLintのせいなのか（でもエラーが出たわけじゃないしな）、多分Nuxtの仕様なんでしょうけど、v-bind:classを省略した:class=以降のオブジェクトに入れたクラス名にはどうやら''(シングルクォート)付けちゃダメっぽいんですね。

ちゃんとドキュメント探せという話もありましょうが…堪忍してくだせえ

OK🙆‍♀️

:class="{
      openbtn: todo.status === 'OPEN',
}

NG🙅‍♀️

:class="{
      'openbtn': todo.status === 'OPEN',
}

あとクラス名は減算演算子としての - とコンフリクトするため控えたほうがよろしいそう。

絞り込み機能の実装

まず、ステータスの内容を入れる箱（find_status）と、ステータスがAllの時の判定に使うfind_flｇをdataに定義します。

computedには、押されたステータスボタンに応じてtodosの表示を変えて描画するdisplay_todos()を書きます。
find_flgがtrueなら（ALLでなければ）配列arr[]を用意し、data変数にはtodosのデータを代入。
todos1つ1つについて、statusが同じものをarrに格納し、arrを返します。
find_flgがfalseなら（ALL。初期状態）なら、まんまstateに入っているtodosを全て返します。

pages/todo.vue

<script>

  data() {
    return {
      content: '',
      selectCat: '',
      cats: ['TASK', 'BUG', 'ORDER', 'OTHER'],
      status: ['ALL', 'OPEN', 'IN PROGRESS', 'RESOLVED', 'CLOSED'],
      find_status: '',
      find_flg: false,
    }
  },
  computed: {
    display_todos() {
      if (this.find_flg) {
        const arr = []
        const data = this.$store.state.todo.todos
        data.forEach((element) => {
          if (element.status === this.find_status) {
            arr.push(element)
          }
        })
        return arr
      } else {
        return this.$store.state.todo.todos
      }
    },
</script>

これにより、computedで表示の方法をtodosからdisplay_todosに変えたので、リストのv-forも変えます。

pages/todo.vue

<tr v-for="todo in display_todos" :key="todo.name">

そして絞り込みボタンには布石のイベントを設置！！

pages/todo.vue

  <v-col class="pa-2" cols="auto">
    <v-btn text elevation="0" @click="flag_reset">ALL</v-btn>
    <v-btn text elevation="0" @click="find('OPEN')">OPEN</v-btn>
    <v-btn text elevation="0" @click="find('IN PROGRESS')">
      IN PROGRESS
    </v-btn>
    <v-btn text elevation="0" @click="find('RESOLVED')">RESOLVED</v-btn>
    <v-btn text elevation="0" @click="find('CLOSED')">CLOSED</v-btn>
  </v-col>

ALLには、find_flg: false にするための flag_reset をクリックイベントに設定しています。

さて、準備は整いましたので、methodの設定に参りたいと思います。

pages/todo.vue

<script>
  find(findStatus) {
    this.find_status = findStatus
    this.find_flg = true
  },
  flag_reset() {
    this.find_flg = false
  },
</script>

ALL以外のボタンが押された際は、findメソッドが発動。押された文字列のデータがfind_statusに代入され、先ほどcomputedで設定した判定に使われます。

ALLボタンに設定したflag_resetではfind_flgをfalseにし、this.$store.state.todo.todosの全てを出力するという仕組みです。

おしまい