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

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

新規登録して質問してみよう
ただいま回答率
85.51%
Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

2018閲覧

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

ruby_0ct

総合スコア57

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2018/12/09 06:32

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

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

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

▼ Object ▼ todos: 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

js

1<template> 2 <div class="todolist" v-for="(todo, index) in getStoreTodos.todos" :key="todos"> 3 <div class="todo">{{ todo.title }}</div> 4 </div> 5</template> 6 7<script> 8 import { mapActions, mapGetters } from "vuex" 9 10 export default { 11 computed: { 12 ...mapGetters({ 13 getStoreTodos: 'todo/getStoreTodos' 14 }) 15 }, 16 mounted () { 17 this.getApiTodos() 18 19 console.dir(this.getStoreTodos) // Objectと返ってくる 20 console.dir(this.getStoreTodos.todos) // undefined 21 }, 22 methods: { 23 ...mapActions({ 24 getApiTodos: 'todo/getApiTodos' 25 }) 26 } 27 } 28</script>

store/todo.js

js

1import axios from 'axios' 2 3const store = () => { 4 return { 5 todos: {} 6 } 7} 8 9export const getters = { 10 getStoreTodos (state) { 11 return state 12 } 13} 14 15export const actions = { 16 async getApiTodos ({ commit }) { 17 let getTodos = await axios.get('http://0.0.0.0:3100/todo/index') 18 commit('setTodos', getTodos.data) 19 } 20} 21 22export const mutations = { 23 setTodos (state, payload) { 24 state.todos = payload 25 } 26}

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

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

vue

1# pages/main.vue 2<template> 3 <div> 4 <div class="todolist" v-for="(todo, index) in todoList" :key="index"> 5 <div class="todo">{{ todo.title }}</div> 6 </div> 7 </div> 8</template> 9 10<script> 11import { mapActions, mapGetters } from "vuex" 12 13export default { 14 computed: { 15 ...mapGetters({ 16 todoList: "todo/todoList" 17 }) 18 }, 19 async mounted() { 20 await this.getApiTodoList() 21 console.log(this.todoList) 22 }, 23 methods: { 24 ...mapActions({ 25 getApiTodoList: "todo/getApiTodoList" 26 }) 27 } 28} 29</script>

js

1# store/todo.js 2import axios from "axios" 3 4export const state = () => ({ 5 todoList: {} 6}) 7 8export const getters = { 9 todoList: state => state.todoList 10} 11 12export const actions = { 13 async getApiTodoList({ commit }) { 14 const res = await axios.get("http://localhost:5100/todo") 15 console.log(res) 16 commit("setTodoList", res.data) 17 } 18} 19 20export const mutations = { 21 setTodoList(state, payload) { 22 state.todoList = payload 23 } 24}

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

json

1{ 2 "todo": [{ 3 "id": 1, 4 "title": "todoタイトル1" 5 }, 6 { 7 "id": 2, 8 "title": "todoタイトル2" 9 } 10 ] 11}

投稿2018/12/09 19:52

shou6

総合スコア305

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ruby_0ct

2018/12/16 10:15

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問