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

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

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

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

Nuxt.js

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

Vuex

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

Q&A

0回答

1382閲覧

VuexのStateの値をmounted()で取得したい

yiz

総合スコア2

Vue.js

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

Nuxt.js

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

Vuex

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

0グッド

0クリップ

投稿2019/08/12 03:57

前提・実現したいこと

ページをロードする際(created()もしくはmouted()中で処理することを想定)にstoreに保存してあるstateの値を取得したい。
storeの値が正しく展開される前にfirebaseの処理が実行されてしまいます。

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

取得した値がオブジェクトの状態で返ってくる(想定は文字列)

該当のソースコード

thread.vue

vue

1 mounted () { 2 this.openThread(this.$store.state.contents.topic) 3 }, 4 methods: { 5 openThread (docName) { 6 this.initInfo() 7 firebase.firestore().collection('chat-room').doc(docName) 8 .collection('messages').orderBy('timestamp', 'asc').onSnapshot(querySnapshot => { 9 querySnapshot.docChanges().forEach(change => { 10 console.log('doc:', change.type) 11 if (change.type ==='added') { 12 this.threadData.unshift({ 13 author: change.doc.data().author, 14 authorid: change.doc.data().authorid, 15 profileImage: change.doc.data().profileImage, 16 data: change.doc.data().message, 17 timestamp: change.doc.data().timestamp 18 }) 19 } 20 }) 21 }) 22 this.alertText = docName + 'ルームにようこそ!' 23 }, 24 }

store/contents.js

javascript

1export const strict = false 2 3export const state = () => ({ 4 topic: {}, 5}) 6 7export const getters = { 8 topic: state => { 9 return state.topic 10 }, 11} 12 13export const mutations = { 14 setTopic (state, value) { 15 state.topic = value 16 }, 17} 18 19export const actions = { 20 setTopic ({commit}, value) { 21 commit('setTopic', value) 22 }, 23} 24 25

試したこと

ソース中に記載のopenThread()関数をボタンイベントから呼ぶとstoreの値が文字列で返ってくるため、実行が成功します。”storeの値の展開処理が非同期であるためmounted()でstoreの値が展開されることが保証されていない”という性質から本現象が起きていると考えていますが、ではどうすれば良いのか というところがわかりません。
computed()でstoreの値が変化した際に実行する事も考えましたがopenthread()関数はページロード時に1度だけ呼びたいので、やりたいことがうまく実現できませんでした。

何か良い手法がありましたらご教授のほどよろしくお願いいたします。

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問