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

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

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

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

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

Q&A

解決済

3回答

19193閲覧

Vue.jsでstoreの配列がObserverになりアクセスできません。

okpk

総合スコア38

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

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

0グッド

3クリップ

投稿2019/04/11 10:05

編集2019/04/12 01:08

Storeにjsonから取得したデータを配列として保管してるのですが、mountedでconsoleから見るとobserverになりアクセス出来ません。

Nuxt.jsのstore/works.jsです。

store

1import axios from 'axios' 2 3export const state = () =>({ 4 jsonURL: "http://localhost:3000/projects.json", 5 worksData:[] 6}) 7export const actions = { 8 async getWorkData(context){ 9 let response = await this.$axios.$get(context.state.jsonURL) 10 context.commit("setWorkData",response) 11 } 12} 13export const mutations = { 14 setWorkData(state,response){ 15 state.worksData = response 16 } 17}

pages/works/_id.vueです。

script

1export default { 2 created() { 3 this.$store.dispatch("works/getWorkData"); 4 }, 5 mounted(){ 6 console.log(this.$store.state.works.worksData); 7 } 8};

console.log(this.$store.state.works)時点では配列にデータが入っていることが確認できるのですが、worksDataまでアクセスするとlengthが0になり何も取得できない状態です。

参考画像です。
1枚目が console.log(this.$store.state.works)
2枚目が console.log(this.$store.state.works.worksData)

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

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

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

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

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

guest

回答3

0

ベストアンサー

getWorkData で非同期通信してるので、mounted のタイミングでは通信が完了してる保証はありません。

投稿2019/04/11 18:05

yhg

総合スコア2161

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

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

okpk

2019/04/12 01:54 編集

回答ありがとうございます。 getWorkData()の通信が終了しstoreデータが更新された後のタイミングでconsoleすると確実にアクセス出来るということでしょうか? また、別ページから_id.vueにアクセスるとデータが取得されているのですが、直接_id.vueにアクセスした場合だとやはりデータが取得されませんでした。 この現象は別ページでgetWorkData()が発火されstoreにすでに値が入っているからという事でしょうか?
yhg

2019/04/12 11:21 編集

概ねその認識で問題ないと思います。ページトランジションとかしてるとcreatedとmountedの間にduration分の時間が発生して、その間に通信が完了してるのかも・・・? ストアの値はリアクティブなのでストアの内容をビューで表示するだけなら、通信が終わったタイミングで勝手にビューが切り替わってくれるのであまり問題にはならないケースが多いと思います。 SSRしたい場合は、fetchメソッド内でアクション投げてawaitで通信完了を待つようにします。
guest

0

開発コンソールは賢いので、console.log() で出力したオブジェクトの 参照 を保持してくれています。
なので、開発コンソールでオブジェクトのツリーを展開したりして確認できる値は
console.log() を実行した時点でのオブジェクトの状態を正確に反映しているわけではなく、
後からプロパティの値が設定されたりして、変更された後のプロパティ値が表示されています。

以下のようにJSON文字列に変換してみるとよくわかると思います。

console.log(JSON.stringify(this.$store.state.works)) console.log(JSON.stringify(this.$store.state.works.worksData))

投稿2019/04/12 04:44

wtokuno

総合スコア448

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

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

0

アクションの部分ですが、下記で直りませんか?

context.commit("setWorkData",response.data)

投稿2019/04/11 10:27

devneko64bit

総合スコア164

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

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

okpk

2019/04/12 01:17

回答ありがとうございます。 responseの中にdataが存在しなかったので試してみましたが取得できませんでした。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問