z_blog:2018:181126_vue_google_login

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

--- z_blog:2018:181126_vue_google_login [2018/11/27] – [Firebaseでログインの設定] adash333
+++ z_blog:2018:181126_vue_google_login [2018/11/27] (現在) – [コンポーネント間の情報の受け渡しとログイン情報の表示] adash333
@@ 行 76: / 行 76: @@
 {{:z_blog:2018:pasted:20181127-204251.png}}
-これで、「Googleアカウントでログイン」ボタンをクリックすると、
+これで、「Googleアカウントでログイン」ボタンをクリックすると、以下のように画面遷移する。
+(まだ、現時点では、Googleログイン後も、画面はHome.vueのままである。)
+{{:z_blog:2018:pasted:20181127-205513.png}}
+===== ログイン状態に有無によるコンポーネント表示の選択 =====
+src/App.vue
-途中
+(変更前)
+{{:z_blog:2018:pasted:20181127-210613.png}}
+(変更後)
+{{:z_blog:2018:pasted:20181127-210904.png}}
+既にGoogleログインしているので、isLogin が true となり、画面にEdit.vueの内容が表示された。
+なんか、Vue.jsは非常にシンプルだと感じました。
+===== コンポーネント間の情報の受け渡しとログイン情報の表示 =====
+ログインユーザーの情報を画面に表示する。
+App.vueが所有している「Googleログインユーザー情報」を、Editor.vueに渡して、表示する。
+App.vue（データを送信する側）では、新しいdataを定義してユーザー情報を格納する。（さらに、<template>の<Editor>タグに :user="userData" のように記載する。）
+Editor.vue（データを受け取る側）では、propsという名前で親コンポーネント（App.vue）から受け継ぐデータを定義する。
+src/App.vue
+(変更前)
+{{:z_blog:2018:pasted:20181127-211529.png}}
+(変更後)
+{{:z_blog:2018:pasted:20181127-211747.png}}
+src/components/Editor.vue
+(変更前)
+{{:z_blog:2018:pasted:20181127-211837.png}}
+(変更後)
+{{:z_blog:2018:pasted:20181127-212327.png}}
+あらら、真っ白になってしまった。Chromeで、Ctrl＋Shift+I にて「デベロッパーツール」を開き、consoleを見てみると、
+{{:z_blog:2018:pasted:20181127-212447.png}}
+とのことなので、App.vueに何か書き忘れたかと再度チェック。App.vueの<template>の<Editor>タグに、:user="userData" のように記載する必要があることが分かった。
+src/App.vue　（修正後）
+{{:z_blog:2018:pasted:20181127-212905.png}}
+ちゃんとGoogleアカウントの名前が表示された。
+参考：https://firebase.google.com/docs/auth/web/manage-users?hl=ja
+{{:z_blog:2018:pasted:20181127-213610.png}}
+ちなみに、このようなデータ受け渡しを行う場合は、もう少し複雑なことをしたい場合には、Vuexという公式ライブラリを利用する必要があるらしい。Vuexは、個人的に何回も挫折した、あのReactでのRedux（Flux）のVue.jsバージョンらしい。。。
+Vue.js 結構単純で面白い。しかも、Ionic(Angular)などのフルスタックフレームワークと比べて動作が軽いところがよい。（私はフルスタックフレームワークが好きなので、いずれはNuxt.jsに手を出したいと考えてはいるが。）、

z_blog/2018/181126_vue_google_login.1543319141.txt.gz · 最終更新: 2018/11/27 by adash333