Vuex で状態管理

  1. Google App Engine Java Standard + Spring Boot 環境構築
  2. Spring Bootのテンプレートエンジン Thymeleafを適用

  3. Spring BootにVue.jsを利用する

  4. Spring BootにVuetify導入からクロスドメインAjax通信

  5. Spring Boot+Vuetify GAEへデプロイ、動作確認

  6. Xamarin.FormsアプリをiOS用にビルド

  7. Xamarin.Forms ポップアップの表示と Http通信

  8. Spring Boot+Vuetify ファイルのアップロードとJSONで結果を返す

  9. Google Google Cloud Vision でOCR。VuetifyからSpringBoot経由で呼び出し

  10. Xamarin ファイル選択

  11. Xamarin ファイルのアップロード

  12. Vue Router を導入し画面遷移

  13. Firebaseでログイン機能

1.Vuex

Firebase を使用して、ログイン機能を追加できた。

つぎは、コンポーネント間で、データのやり取りを行いたい。

状態管理を行う手法の記述があるが、Fluxライクな公式実装ということで、Vuex を素直に使用する。

https://vuex.vuejs.org/ja/

動画チュートリアル

1.1 インストール

npm install vuex –save

2.実装

2.1 main.js

  • Vue.user(Vuex) で使用準備
  • Vuex.Store でストアを作成
  • state に、firebase のログインユーザー情報を格納
  • muattions で、stateに設定した user情報を操作するメソッドを公開
  • firebase のユーザーが取得出来たら、store.commit にて、stateにユーザーを格納する
  • new Vue() 内に、storeを設定することで、グローバルにstoreを参照できるように

  1. import Vue from 'vue'
  2. import Vuex from 'vuex'
  3. import '@/plugins/vuetify'
  4. import firebase from '@/plugins/firebase'
  5. import 'firebase/auth'
  6.  
  7. import { MUTATION_LOGIN_USER } from '@/consts'
  8.  
  9. Vue.use(Vuex)
  10.  
  11. const store = new Vuex.Store({
  12. state: {
  13. user:null
  14. },
  15. mutations: {
  16. user(state, user) {
  17. state.user = user;
  18. }
  19. }
  20. })
  21.  
  22. firebase.auth().onAuthStateChanged(user => {
  23. if (user) {
  24. store.commit(MUTATION_LOGIN_USER, user);
  25. }
  26. })
  27.  
  28. new Vue({
  29. render: h => h(App),
  30. store,
  31. }).$mount('#app')

2.2 const.js

ミューテーションを介して、stateを操作するが、ミューテーションを介した操作をトラックするためにミューテーションの名称を外だし

  1. export const MUTATION_LOGIN_USER = "user";

2.3 App.vue

  • computed の userName で、Vuexのstoreから、firebaseのログインユーザを取得する
  • {{userName}} で上記にバインド。ログインユーザーの表示名をツールバーに表示する
  1. <template>
  2. <v-app>
  3. <v-navigation-drawer fixed clipped app v-model="navBar">
  4. <v-list dense class="pt-0">
  5. <router-link to="/login">
  6. <v-list-tile>
  7. <v-list-tile-action>
  8. <v-avatar v-if="photoUrl" size="28px">
  9. <img :src="photoUrl">
  10. </v-avatar>
  11. <v-icon v-else>account_box</v-icon>
  12. </v-list-tile-action>
  13. <v-list-tile-content>{{userName}}</v-list-tile-content>
  14. </v-list-tile>
  15. </router-link>
  16. <router-link to="/">
  17. <v-list-tile>
  18. <v-list-tile-action>
  19. <v-icon>home</v-icon>
  20. </v-list-tile-action>
  21. <v-list-tile-content>HOME</v-list-tile-content>
  22. </v-list-tile>
  23. </router-link>
  24. <router-link to="/entry">
  25. <v-list-tile>
  26. <v-list-tile-action>
  27. <v-icon>edit</v-icon>
  28. </v-list-tile-action>
  29. <v-list-tile-content>ENTRY</v-list-tile-content>
  30. </v-list-tile>
  31. </router-link>
  32. <router-link to="/about">
  33. <v-list-tile>
  34. <v-list-tile-action>
  35. <v-icon>settings</v-icon>
  36. </v-list-tile-action>
  37. <v-list-tile-content>ABOUT</v-list-tile-content>
  38. </v-list-tile>
  39. </router-link>
  40. </v-list>
  41. </v-navigation-drawer>
  42. <v-toolbar clipped-left fixed app>
  43. <v-toolbar-side-icon @click.stop="navBar = !navBar"></v-toolbar-side-icon>
  44. <v-toolbar-title>FavoPhrase</v-toolbar-title>
  45. <v-spacer></v-spacer>
  46. <v-toolbar-items class="hidden-sm-and-down">
  47. <v-btn flat to="/">Home</v-btn>
  48. <v-btn flat to="/entry">Entry</v-btn>
  49. <v-btn flat to="/about">About</v-btn>
  50. <v-btn flat to="/login">
  51. <v-avatar v-if="photoUrl" size="32px" class="pa-4">
  52. <img :src="photoUrl">
  53. </v-avatar>
  54. {{userName}}
  55. </v-btn>
  56. </v-toolbar-items>
  57. </v-toolbar>
  58. <v-content>
  59. <v-container fluid fill-height>
  60. <v-fade-transition mode="out-in">
  61. <router-view></router-view>
  62. </v-fade-transition>
  63. </v-container>
  64. </v-content>
  65. </v-app>
  66. </template>
  67.  
  68. <script>
  69. import firebase from '@/plugins/firebase'
  70.  
  71. export default {
  72. name: 'App',
  73. data() {
  74. return {
  75. navBar: null,
  76. }
  77. },
  78. computed: {
  79. userName() {
  80. var user = this.$store.state.user;
  81. if (user != null) {
  82. if (user.displayName) {
  83. return user.displayName;
  84. }
  85. if (user.email) {
  86. return user.email;
  87. }
  88. }
  89. return "LOG IN";
  90. },
  91. photoUrl() {
  92. var user = this.$store.state.user;
  93. return (user == null)?null:user.photoURL;
  94. }
  95. },
  96. created() {
  97. },
  98. mounted() {
  99. }
  100. }
  101. </script>
  102. <style>
  103. a {
  104. text-decoration: none;
  105. }
  106. </style>

Reduxより使いやすそう

3.実行

3.1 ログインしていない状態から

login

3.2 Firebase ログインUIから、ログイン

firebaseui_login

3.3 ログインが成功し表示名とアイコンが表示された OK

avater

Follow me!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です