質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.97%

Vuex・JS Storeに格納したリストが展開できない

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 472

ruby_0ct

score 51

Vuex NextJSでページを開いたときにAPI(Rails)を叩き、JSONでリストを取得し、表示させる処理をしています。

取得したデータをStoreに保存し、GetterでObjectを取ってくるとこまでは問題ないのですが、Objectの展開がうまくできません。

mountedでのObjectの中身をデバッグすると、以下の通りになっています。

Objecttodos: Array(2)
  ▶︎ 0: {id: 1, title: "todoタイトル1"}
  ▶︎ 1: {id: 2, title: "todoタイトル2"}
     length: 2
  ▶︎ __proto__: Array(0)
▶︎ __ob__: Observer {value: {...}, dep: Dep, vmCount: 0}
▶︎ __proto__: Object

ここからconsole.dir(this.getStoreTodos.todos)と指定することで、0と1が取り出せると思ったのですが、undefinedとなってしまいます。
v-forも展開できていない状況です。

基本的なところで恐縮ですが、どのようにすれば、取り出せるでしょうか?
ご教授いただければと思います。

ソースコード

pages/index.vue

<template>
    <div class="todolist" v-for="(todo, index) in getStoreTodos.todos" :key="todos">
      <div class="todo">{{ todo.title }}</div>
    </div>
</template>

<script>
  import { mapActions, mapGetters } from "vuex"

  export default {
    computed: {
      ...mapGetters({
        getStoreTodos: 'todo/getStoreTodos'
      })
    },
    mounted () {
      this.getApiTodos()

      console.dir(this.getStoreTodos) // Objectと返ってくる
      console.dir(this.getStoreTodos.todos) // undefined
    },
    methods: {
      ...mapActions({
        getApiTodos: 'todo/getApiTodos'
      })
    }
  }
</script>

store/todo.js

import axios from 'axios'

const store = () => {
  return {
    todos: {}
  }
}

export const getters = {
  getStoreTodos (state) {
    return state
  }
}

export const actions = {
  async getApiTodos ({ commit }) {
    let getTodos = await axios.get('http://0.0.0.0:3100/todo/index')
    commit('setTodos', getTodos.data)
  }
}

export const mutations = {
  setTodos (state, payload) {
    state.todos = payload
  }
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

まず、NextJSではなくNuxt.jsですね。

また所々コードに間違いがあるようです。
以下の様な書き方がいいのかなと思います。
動きは確認済みです。

# pages/main.vue
<template>
  <div>
    <div class="todolist" v-for="(todo, index) in todoList" :key="index">
      <div class="todo">{{ todo.title }}</div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapGetters } from "vuex"

export default {
  computed: {
    ...mapGetters({
      todoList: "todo/todoList"
    })
  },
  async mounted() {
    await this.getApiTodoList()
    console.log(this.todoList)
  },
  methods: {
    ...mapActions({
      getApiTodoList: "todo/getApiTodoList"
    })
  }
}
</script>
# store/todo.js
import axios from "axios"

export const state = () => ({
  todoList: {}
})

export const getters = {
  todoList: state => state.todoList
}

export const actions = {
  async getApiTodoList({ commit }) {
    const res = await axios.get("http://localhost:5100/todo")
    console.log(res)
    commit("setTodoList", res.data)
  }
}

export const mutations = {
  setTodoList(state, payload) {
    state.todoList = payload
  }
}

http://localhost:5100/todoは、
テスト用に下記のjsonを返すjson-serverを立てています。

{
  "todo": [{
      "id": 1,
      "title": "todoタイトル1"
    },
    {
      "id": 2,
      "title": "todoタイトル2"
    }
  ]
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/12/16 19:15

    すみません、返信が遅くなってしまいました...
    無事にうまくいきました!書き方について参考になります。
    動作確認まで行っていただき、ありがとうございました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.97%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる