PROGRAMMING

Vuexでログイン状態を管理する【Vue.js】

今回の内容
vuexについて
 State / Getter / Mutation / Action

今回の内容

Vuexについて

現在はログインしたけど、ログインの情報をVueにおいて保持できていないという状態です。

たとえば、ChatFormよりログインしていると他のコンポーネント上ではログイン状態を取得できないで、別のチャンネルに移動したら別のコンポーネントになってしまいログインの情報は取得できていないのです。

そのため、ログインしてユーザ情報を管理する場合は以下の行う必要があります。

1. ログインしたときに、Vuex にてユーザ情報を保存する
2. ユーザ情報がコンポーネントにおいてユーザ情報を Vuex から取得する

このvuexには、State/Getter/Mutation/Actionの4つの概念が存在します。

この概念を理解しながらやっていきたいと思います。

下記のページはこの4つの概念を説明してくれています。

State

Stateはデータを管理する場所です。

storeというディレクトリにindex.jsというファイルを作り、下記のコードを追加します。

export const state = () => ({
  user: {
    email: 'test@gmail.com',
  },
})

Stateでユーザーの情報を管理します。ここでは、確認のためにテスト用のメールアドレスを追加しておきます。

stateの定義の仕方が独特ですが、こういう定義の仕方なんだなと捉えておきます。

次に、pages/index.vueでユーザー情報を取得します。

取得できているかどうかを一旦、確認してみます。

user情報が出力出来ていました。

ChatFormにも同じようにmountedを追加してみても、ユーザー情報を出力されていました。

Getter

GetterStateから別の値を算出するために使用します。

少し何を言っているかわからないですね。

まぁつまりstateの情報を使って他のことをしたいっていうイメージですね多分。

今回はisAuthenticatedというメソッドを定義して、Stateのユーザー情報を使い、ログインしているかどうかを判別します。

export const state = () => ({
  user: {
    email: 'test@gmail.com',
  },
})
export const getters = {
  isAuthenticated(state) {
    return !!state.user
  },
}

これでstateにあるユーザーかそうではないかを判別することが出来ます。

!!state.userでは、stateで定義したユーザーかどうかということを判別するようにしています。

!!⬅️コレによって、trueかfalseかというBoolean型にすることが出来ます。

それでは、確認のために出力できるようにしていきます。

export default {
  mounted() {
    console.log(this.$store.getters.isAuthenticated)
  },
  methods: {},
}
</script>

これでうまく出力できたらtrueがコンソールで表示されるはずです。

きちんと表示されていました。

Mutation

MutationStateを更新するだけのものです。

そのため、Mutationを追加するのはstore/index.jsファイル内のみということになります。

基本的にindex.vueなどで出力することはしません。

setUserというメソッドを定義して、(googleでの)ユーザーの情報を取得できるようにします。

export const state = () => ({
  user: null,
})
export const getters = {
  isAuthenticated(state) {
    return !!state.user
  },
}
export const mutations = {
  setUser(state, user) {
    state.user = user
  },
}

のuserは新しくユーザーの情報を渡すので、nullに変更しておきます。

これでユーザーの情報をStateに渡して、更新することが出来ます。

そして、このMutationの値をActionに渡して出力をさせます。

Action

Actionは非同期処理や外部APIとの通信を行い、最終的にMutationを呼びだすために用いられます。

つまり、Mutationを出力するために使うものとここではイメージとして捉えておきます。

それでは、store/index.jsから変更していきます。

export const state = () => ({
  user: null,
})
export const getters = {
  isAuthenticated(state) {
    return !!state.user
  },
}
export const mutations = {
  setUser(state, payload) {
    state.user = payload
  },
}

export const actions = {
  setUser(context, user) {
    context.commmit('setUser', user)
  },
}

ここでまず注目するのが、MutationsetUserの第二引数のpayloadです。

setUser(state, payload) {
state.user = payload

このpayloadactionから渡せれるものと考えておきます。調べても深く理解は出来ませんでしたが、そういったものとして捉えておきます。

そして、actionsでは、第一引数はcontextになり、第二引数では渡したい値を入れます。

今回はMutationでやったユーザーの情報を渡したいので、userにします。

context.commitを実行することで、Mutationを通じてstateを変更することが出来ます。

commitの第一引数はMutationのメソッド名を文字列で渡します。

これでsetUserpayloaduserを渡すことができるとのことです。

それでは出力できるようにしていきます。

script>
import Vue from 'vue'
+ import { mapActions } from 'vuex'
import ElementUI from 'element-ui'
import { db, firebase } from '~/plugins/firebase'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
export default {
  data() {
    return {
      dialogVisible: false,
      text: null,
    }
  },
  methods: {
    ...mapActions(['setUser']),
    openLoginModal() {
      this.dialogVisible = true
    },
    addMessage(event) {
      if (this.enterJapaneseConversion(event)) {
        return
      }
      const channelId = this.$route.params.id
      db.collection('channels')
        .doc(channelId)
        .collection('messages')
        .add({ text: this.text, createdAt: new Date().getTime() })
        .then(() => {
          this.text = null
        })
    },
    enterJapaneseConversion(event) {
      const codeForConversion = 229
      return event.keyCode === codeForConversion
    },
    login() {
      const provider = new firebase.auth.GoogleAuthProvider()
      firebase
        .auth()
        .signInWithPopup(provider)
        .then((result) => {
          const user = result.user
         + this.setUser(user)
         + console.log(this.$store.state.user)
          this.dialogVisible = false
        })
        .catch((error) => {
          window.alert(error)
        })
    },
  },
}
</script>

今回はコードが長いので、追加の部分にっは+を入れておきました。

import { mapActions } from 'vuex'

上記の一文でMutationのメソッドが使えるようになります。

data()メソッドと同じような役割なので、setUserthis.setUser()で使えるようになりました。

this.setUser(user)
console.log(this.$store.state.user)

そして上記の文で、引数をuserにしてsetUseを呼び出します。

そしてMutationによって変更させられたstate.userを出力します。

きちんと出来ているか確認します。

出力を確認するためにgoogleにログインをしようとしたら、上記のエラーが出ました。

store/index.jsに下記のコードを追加したら、無事解決しました。

export const strict = false

上のコードはなんかvuexのルールみたいなもので出るエラーを無効にする意味みたいな感じらしいです。とりあえず、これでエラーはなくなりました。

これで無事にユーザーの情報を出力することが出来ました。

まとめ

今日はvuexにてログイン状態を維持することが出来ました。

次はユーザーの名前と画像などのデータを出力できるようにしていきます。

最後まで読んで頂き、ありがとうございました。

-PROGRAMMING

Copyright © Iseblog ,@2020 All Rights Reserved.