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

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

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

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

Vuex

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

Q&A

1回答

473閲覧

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

figalo66

総合スコア7

Nuxt.js

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

Vuex

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

0グッド

0クリップ

投稿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 } }

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

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

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

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

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

guest

回答1

0

拙い知識からなのですが、middlewareで管理するというのはよくないのでしょうか・・・????

投稿2019/08/16 01:36

teruri

総合スコア220

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問