【Nuxt.js】Vuexを利用したデータのやり取りを追っていく〜ログインデータ編〜【Vue.js】

Vuexのデータのやり取りの流れって何回も移動するので、ややこしくなりますよね。。。。
そんなあなたのために、データのやり取りを仕事に例えて追っていこうと思います。

まずは、おなじみのデータのサイクルから復習しておきましょう

参考記事
https://qiita.com/nasum/items/d17c0a628e6c32616b85

メソッドの早見表

仕事する場所	仕事を依頼する関数	仕事を受け取る関数
Vueコンポーネント	this.$store.dispatch(引継ぎ先関数名, データ)	this.$store.getters[stateデータ名]
actionsプロパティ	context.commit(引き継ぎ先関数名, データ)	関数名(context, payload)
mutationsプロパティ		関数名(state, payload)

payloadとは

受け取ったデータのこと

1.Vueコンポーネント

仕事を依頼する関数(actionsプロパティへ)

this.$store.dispatch(引継ぎ先関数名, データ)で、actionsプロパティに引き継ぎさせます。

<script>
export default {
  data () {
    return {
      loginForm: {
        email: '',
        password: '',
      },
    }
  },
  methods: {
    loginSubmit (session) {
      this.$store.dispatch('login', {
        email: this.loginForm.email,
        password: this.loginForm.password,
      })
    }
  }
}
</script>

2.actionsプロパティ

仕事を受け取る関数(Vueコンポーネントから)

関数名(context, payload)で、データを受け取る

仕事を依頼する関数(mutationsプロパティへ)

context.commit(引き継ぎ先関数名, データ)で、mutationプロパティにデータを引き継がせる。

store/index.js

export const state = () => ({
  user: {
    uid: '',
    name: '',
    email: '',
    login: false
  }
})

export const actions = {
  async login ({ commit }, payload) {

    const loginUser = await this.$axios.$post('/api/v1/sessions', {
      session: {
        email: payload.email,
        password: payload.password,
      }
    })

    await commit('getData', {
      uid: loginUser.data.id,
      name: loginUser.data.name,
      email: loginUser.data.email,
    })

    await commit('switchLogin')

    alert(loginUser.data.name)
    this.$router.push({ path: `/users/${loginUser.data.id}` })
  }
}

引き継がれたactionsプロパティのloginメソッドの主なお仕事は三つ。

1. 引き継がれたデータをAPIに投げて、帰ってきた値をキャッチする
2. キャッチした値の中のデータを、mutationプロパティに引き継がせる
3. もう一つだけ違う仕事を、同じくmutationプロパティに依頼する

3.mutationsプロパティ

仕事を受け取る関数(actionsプロパティから)

関数名(state, payload)で、データを受け取る

store/index.js

export const mutations = {

  getData (state, payload) {
    state.user.uid = payload.uid
    state.user.name = payload.name
    state.user.email = payload.email
  },

  switchLogin (state) {
    state.user.login = true
  }
}

mutationsプロパティ内のメソッドのそれぞれの仕事は以下の通り。

1. getDataの仕事は、受け取ったデータをstateデータに格納する
2. switchLoginの仕事は、stateのloginの真偽値をtrueにする

4.gettersプロパティ

仕事を納品する(Vueコンポーネントへ)

store/index.js

export const getters = {
  user: state => {
    return state.user
  }
}

5.Vueコンポーネント

納品されたものを受け取る(gettesプロパティから)

<template>
  <v-card>
    {{ user }}
  </v-card>
</template>

<script>
・・・
  computed: {
    user () {
      return this.$store.getters['user']
    }
  }
・・・
</script>