pythonを使ってリアクティブなWebアプリを作りたい【開発編3-2】

こちらの続きです。

- [pythonを使ってリアクティブなWebアプリを作りたい【開発編3】](https://qiita.com/geeorgey/items/1f5544b12e7d26a1216c)


## 今回は表示系をつくります
最終的なゴールはこちら
![Vue_Material_Admin_Template.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22294/28b842d9-3807-4c9a-6968-8bcacb589d6a.png)

ToDoの登録画面及び、登録されたToDoの表示部分を作ります。

変更を伴うファイルは以下の通り

- [frontend/src/views/todo/ToDo.vue](https://github.com/geeorgey/vue_flask_template/blob/main/frontend/src/views/todo/ToDo.vue)
- [frontend/src/store/modules/todo.js](https://github.com/geeorgey/vue_flask_template/blob/main/frontend/src/store/modules/todo.js)
- [backend/main.py](https://github.com/geeorgey/vue_flask_template/blob/main/backend/main.py)
- [dist](https://github.com/geeorgey/vue_flask_template/tree/main/dist)

distについてはbulid後のファイルそのままなので、特に自分で作るというものではありません。

## ToDo.vueについて
[frontend/src/views/todo/ToDo.vue](https://github.com/geeorgey/vue_flask_template/blob/main/frontend/src/views/todo/ToDo.vue)

```js:frontend/src/views/todo/ToDo.vue
  mounted() {
    this.$store
      .dispatch('fetchTodo', {
        user_id: this.$store.state.auth.user_id,
      })
      .then(() => {
        //console.log('getToDos-----')
        //console.log(getToDos)
      })
      .catch(() => {
        this.loading = false
      })
  },
```

見慣れないmountedという項目が出てきました。
これは、このページがロードされた際に実行するという意味です。
dispatchでfetchTodoを呼び出していますが、画面がロードされた際に、当該ユーザが持っているToDoのレコードを取得しますよという意味です。

user_id: this.$store.state.auth.user_id

これも見慣れない表現ですが、auth.jsのstateに入っているuser_idを呼び出しますという意味です。
データの格納先は
[frontend/src/store/modules/auth.js](https://github.com/geeorgey/vue_flask_template/blob/8b916671a518016271dd71a661d8ad89a6b1ae44/frontend/src/store/modules/auth.js#L19)
で定義されており、ログイン時にUserテーブルに格納されているユーザーのIDを登録するようになっています。

画面ロード時はそれくらいですね。

## 登録部分について
handleSubmitFormを呼び出してキーワードを登録しています。

```js:frontend/src/views/todo/ToDo.vue
  methods: {
    handleSubmitForm() {
      console.log('handleSubmitForm')
      console.log(this.formModel)
      console.log('todo: ' + this.formModel.todo)
      this.loading = true
      if (this.formModel.todo != null) {
        this.$store
          .dispatch('addtodo', { todo: this.formModel.todo, user_id: this.$store.state.auth.user_id })
          .then(() => {
            this.loading = false
          })
          .catch(() => {
            this.loading = false
          })
      }
    },
```

addtodoにJSON煮詰めたデータを渡しているというおなじみな形です。

## 削除部分について
これは初見部分があります。

```vue
          <v-data-table
            v-model="selected"
            show-select
            :headers="todo_headers"
            :items="$store.state.todo.todos"
            hide-default-footer
            class="elevation-0 table-striped"
          >
```

v-modelにselectedというものが配置されているのですが、これは[同ファイルのdataの中で定義されたただの配列の入れ物です](https://github.com/geeorgey/vue_flask_template/blob/8b916671a518016271dd71a661d8ad89a6b1ae44/frontend/src/views/todo/ToDo.vue#L81)。

v-data-tableでチェックを入れたデータがseledtedの中に入ります。あとはそれを使ってdispatchでデータを送信するだけですね。

このような形で、データの入力及び削除ができるようになります。お試しください。


## 関連リンク
- [pythonを使ってリアクティブなWebアプリをお手軽に1分で作りたい](https://qiita.com/geeorgey/items/ace37bd92841c9d1a378)
- [pythonを使ってリアクティブなWebアプリを作りたい【基礎編】](https://qiita.com/geeorgey/items/3f86b207cd412680b835)
- [pythonを使ってリアクティブなWebアプリを作りたい【開発編】](https://qiita.com/geeorgey/items/ea60afe0c44a5f9db483)
- [pythonを使ってリアクティブなWebアプリを作りたい【開発編2】](https://qiita.com/geeorgey/items/961c1d1092ec60bb06bd)
- [pythonを使ってリアクティブなWebアプリを作りたい【開発編3】](https://qiita.com/geeorgey/items/1f5544b12e7d26a1216c)
- [pythonを使ってリアクティブなWebアプリを作りたい【開発編3-2】](https://qiita.com/geeorgey/items/54b4fb22351a3e941cf6)←イマココ
- [pythonを使ってリアクティブなWebアプリを作りたい【開発編4】パスワードの暗号化](https://qiita.com/geeorgey/items/85905a4772903b180fad)