その関数とは以下のように書いてある
コードで表すと
import { mapActions } from 'vuex';
export default {
// 省略
methods: {
...mapActions({
// Object's item can be a function which accept `dispatch` function as the first param, it can accept anthor params
submit(dispatch, name, email) {
// do any other things in this function
if (!this.termsOfServiceChecked) {
alert('利用規約に同意してください');
return;
}
// specially, You need to pass anthor params from the mapped function
dispatch('registerUser', { name, email });
}
}
}
}
以下のような書き方もできるが、マッピングが増えてくるとregisterUser
はマッピングしたものかが分かりづらくなりコードが読みにくくなる印象がある。
import { mapActions } from 'vuex';
export default {
// 省略
methods: {
...mapActions(['registerUser']),
submit(name, email) {
if (!this.termsOfServiceChecked) {
alert('利用規約に同意してください');
return;
}
this.registerUser({ name, email});
}
}
}
以下のようにマッピングしたメソッド呼ぶ前に、バリデーションなど事前にしておきたい処理がなければ、
mapActionsの第2引数のオブジェクトのメンバーは関数がいいかもしれないと思いました。
<template>
<button @click="fetch">
</template>
<script>
import { mapActions } from 'vuex';
export default {
methods: {
...mapActions(['fetch'])
}
}
</script>