Vuexのデータのやり取りの流れって何回も移動するので、ややこしくなりますよね。。。。
そんなあなたのために、データのやり取りを仕事に例えて追っていこうと思います。
まずは、おなじみのデータのサイクルから復習しておきましょう
メソッドの早見表
| 仕事する場所 | 仕事を依頼する関数 | 仕事を受け取る関数 |
|---|---|---|
| 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>