nuxt.jsで打った内容が反映されるようにしたい。

Question

前提・実現したいこと

nuxt.jsを使ってtodoアプリを作っています。

エラーは出ないのですが、Form.vueにある<v-text-field label="追加するタスク" placeholder="タスクを入力してください" v-model="title"></v-text-field>に入力したものが、List.vueにある、 <td>{{ todo.title }}</td>に反映されません。

発生している問題・エラーメッセージ

todoを入力したものが、ブラウザに表示されません。

該当のソースコード

store/todos.js

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

export const mutations = {
  addTodo: function(state, title) {
    state.todos.push({
        title: title,
      });
      console.log(title)
    }
}

export const getters = {
  title: function(state) {
    return state.title
  }
}

components/Form.vue

<template>
  <v-row>
    <v-col cols="12">
      <v-card>
        <v-form @submit.prevent="addTodo" >
          <v-card-text>
            <v-text-field label="追加するタスク" placeholder="タスクを入力してください" v-model="title"></v-text-field>
          </v-card-text>
          <v-card-text>
            <v-text-field type="date" label="締切日" ></v-text-field>
          </v-card-text>
          <v-card-text>
            <v-textarea label="内容" placeholder="内容を入力してください"></v-textarea>
          </v-card-text>
          <v-card-actions>
            <v-btn type="submit">送信する</v-btn>
          </v-card-actions>
      </v-form>
    </v-card>
    </v-col>
  </v-row>
</template>

<script>
export default {
  data() {
    return {
      todos: [],
      title: ""
    }
  },
  methods: {
    addTodo: function() {
      this.$store.commit('todos/addTodo',{title: this.title}),
      this.title = ''
    }
  }
}
</script>

components/List.vue

<template>
<v-row>
  <v-simple-table>
    <thead>
      <tr>
        <th>ID</th>
        <th>タイトル</th>
        <th>期限</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(todo, index) in todos" v-bind:key="todo.id">
        <td>{{ todo.id }}</td>
        <td>{{ title }}</td>
        <td>{{ todo.deadline }}</td>
        <td ><v-icon>mdi-delete</v-icon></td>
        <td>
          <v-icon>mdi-account-edit</v-icon>
        </td>
      </tr>
    </tbody>
  </v-simple-table>
</v-row>
</template>

<script>
import {mapGetters} from 'vuex';
export default {
  computed: {
    todos() {
    return this.$store.state.todos
    },
    title() {
      return this.$store.getters.title
    }
  },
}
</script>

試したこと

components/Form.vueにある
this.$store.commit('todos/addTodo',{title: this.title}),の上にconsole.logをしたら値は取れていますが、
store/todos.jsにある

state.todos.push({
        console.log(title)
        title: title,
      });

をしたらしっかり値は取れてないです。

補足情報（FW/ツールのバージョンなど）

書籍も参考にしてやってみましたが、どうもうまくいきません。よろしくお願いします。
ここにより詳細な情報を記載してください。

Comments

[stakizawa]

表示させたいのは、List.vueですか？
また、このList.vueのソースコードはこれが全てでしょうか？

[wattyo]

すいません。説明不足でした。Form.vueにある
<v-text-field label="追加するタスク" placeholder="タスクを入力してください" v-model="title"></v-text-field>　で入力した内容が、list.vueにある<td>{{ todo.title }}</td>に反映されないということです。質問内容書き直します。List.vueのソースコードはForm.vueで打ったものを表示させるだけなので、コードはこれが全てです。

Answer 1

まず前提として、List.vueで参照しているtodosはList.vueの中で定義しているdataを参照しているので、storeの管理しているtodosは参照していません。

なので、Form.vueでいくら値を追加してもList.vueのtodosには値が増えていきません。

<tr v-for="(todo, index) in todos" v-bind:key="todo.id">

data() {
  return {
    todos: [], // 上で参照しているのはここを見ているので、常に空のまま
    title: ""
  }
},

storeの値を参照するのであれば、this.$store.state.todosで参照できます。

Comments

[wattyo]

回答ありがとうございます。回答を参考にLIst.vueに{mapState}を使用しましたが、結果は変わらずです。

[stakizawa]

なるほど。ちなみにstoreに関係するコードはこれで全てですかね？

todosをモジュール化していないのであれば、this.$store.commit(“addTodo”)
でいけるかな？と思いました。

あと、computed内のmapStateの書き方が違うと思います。

computed : {
...mapState([“todos “])
}

ですかね？

[wattyo]

回答ありがとうございます。おっしゃっていただいたやり方とは違うやり方ですが、vueのコンソールに表示されるところまで持っていくことができました。次はgettersを用いて　ブラウザに表示させようと思うのですが、うまくいかず、文法上のミスがあるのかもしれませんが、アドバイスの方いただいてもいいでしょうか？

[stakizawa]

vueのコンソールに表示というのは、store/todos.jsのaddTodoメソッド内のconsole.logで正しい値が出力されたということですかね？

gettersで取得しようとしているのは、state.titleですが、それを変更する記述が見当たりません。
なので、state.titleを取得しようとしても空文字になっているんだと思いますね。

上記のconsoleの部分で正しく値が取得出来ているのであれば、一緒にstate.titleも変更してみては？

[wattyo]

すいません。またも説明不足でした。vue.js develoopertoolで確認したところ、mutatitonsでは変更が確認できています。ただ、stateの階層がおかしくなっていて表示されない原因はこれかなと思っています。理解力がない私に対して根気よく付き合ってくださり本当に感謝しています。画像をアップしておきます。