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

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

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

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

Vuex

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

受付中

nuxtで、ページ遷移時にセットしたstateを表示したい

figalo66
figalo66

総合スコア0

Nuxt.js

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

Vuex

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

1回答

0評価

0クリップ

10閲覧

投稿2019/08/13 12:35

トップページにアクセスした際、会員情報をstateにセットし、そのstateの情報を表示したいのですが、表示されません。
stateに会員情報は格納されるため、一度違うページに行って、再度トップに戻った時は表示されます。
しかし、初回トップページにアクセスした際は表示されません。以下コードです。

pages/index.vue

<template> <v-layout column justify-center align-center> <login /> <nuxt-link to="/myPage">マイページ</nuxt-link> </v-layout> </template> <script> import Logo from "~/components/Logo.vue"; import VuetifyLogo from "~/components/VuetifyLogo.vue"; import { mapActions, mapState, mapGetters } from "vuex"; import Login from "~/components/Login.vue"; export default { computed: { ...mapState('user', ['user']), }, methods: { }, components: { Logo, VuetifyLogo, Login }, name: "TopPage", data() { return { token: null, cheerBalance: null, account: null }; }, }; </script>

Components/Login.vue

<template> <section class="section"> <v-card> <v-card-title class="headline"> <v-btn @click="login">ログイン</v-btn> </v-card-title> <v-card-text> <p>displayName, {{ user.displayName }}!</p> </v-card-text> </v-card> </section> </template> <script> import firebase from "@/plugins/firebase"; import { mapActions, mapState, mapGetters } from "vuex"; export default { computed: { ...mapState("user", ["user"]), }, created: async function() { await this.checkIsAuth() }, methods: { ...mapActions({ checkIsAuth: "user/checkIsAuth", }) } }; </script>

store/user.js

import firebase from "@/plugins/firebase"; export const strict = false export const state = () => ({ user: {}, }) export const mutations = { setDisplayName(state, payload) { state.user.displayName = payload }, } export const actions = { async checkIsAuth({ commit }, payload) { await firebase.auth().onAuthStateChanged(user => { if (user) { commit('setDisplayName', user.displayName) } }); }, } export const getters = { user( state ) { return state.user } }

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Nuxt.js

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

Vuex

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