[nuxt.js その５] storeの実装

nuxtでstoreを実装

[公式] ストアについて

・storeディレクトリにファイルがある場合は自動でVuexを使用する準備をしてくれるよ！
・ストアには２つのモードが存在するよ！
・クラシックは廃止予定だからモジュールモードを使うほうがいいよ！
・stateの値はfunction形式で定義してあげないと、異なるユーザ間で予期せぬ情報共有が起きることがあるよ！

とのことです。

公式ページを見て気になったのはgettersとactionsが定義されておらず、以下のような構成となっていたことでした。

前実装したときは以下の構成でした。

モジュールモードになって簡素化されたのか？　とも考えましたが、どうもシンプルなら上の構成でもいいけど複雑化してくると困ることがでてくるから下の構成のほうがいいよ　ということのようです。Vuexのページ

今回はfirebaseで取得したユーザ情報を保持しておきたいので以下のように作成しました。

~/store/auth.js

// stateはfunction形式で記述しないと複数人で同じ値になってしまう場合がある
export const state = () => ({
  email: {},
  fireid: {}
})

export const getters = {
  email: state => {
    return state.email
  },
  fireid: state => {
    return state.fireid
  }
}

export const mutations = {
  setEmail (state, value) {
    state.email = value
  },
  setLogOut (state) {
    state.email = ''
  },
  setFireID (state, value) {
    state.fireid = value
  }
}

export const actions = {
  setEmail ({commit}, value) {
    commit('setEmail', value)
  },
  setLogOut ({commit}) {
    commit('setLogOut')
  },
  setFireID ({commit}, value) {
    commit('setFireID', value)
  }
}

ストアのゲッタを呼ぶ場合は以下

<router-link to="/user/login" v-if="this.$store.getters['auth/email'] == ''" class="toolbar-font">ログイン</router-link>

ストアの値を書き換える場合は以下
（ログインに成功してstateの値をaction経由で更新）

pages/login.vue

<template>
  <login-form v-on:LoginFormEvent="LoginEvent"></login-form>
</template>
<script>
import LoginForm from '../../components/LoginForm.vue'
export default {
  components: {
    LoginForm
  },
  methods: {
    LoginEvent (resultCode, data) {
      if (resultCode < 0) {
        console.log("ログインに失敗しました")
        this.$router.push({path: '/user/login'})
      }
      // storeにログイン情報をセット
      console.log(resultCode, data)
      this.$store.dispatch('auth/setEmail', data.user.email)
      this.$store.dispatch('auth/setFireID', data.user.uid)
      
      // rootページに遷移 
      this.$router.push({path: '/'})
    }
  }
}
</script>

基本はこんなとこかな