Vueを使ったFirebaseのログイン実装でエラーが出てうまくいかない。Stringならない？

Question

VueでFirebaseのメールアドレス&パスワードのログイン認証を実装したいのですが、エラーがでてしまいうまくいきません。

エラーが出てるのは、「StoreUser.js」に書いている「signInWithEmailAndPassword」の部分。

signInWithEmailAndPassword(email, password)と書いたら、下記のエラーが出ました。

[Vue warn]: Error in v-on handler: "Error: signInWithEmailAndPassword failed: First argument "email" must be a valid string."

signInWithEmailAndPassword(email.toString().trim(), password.toString().trim())と書いたら、エラーが消えたもの、ログイン失敗で下記コードが表示されました。

auth/invalid-email, The email address is badly formatted.

フォームに入力した文字は、一般的なメールアドレスですが全て弾かれます。
[e-mail]とか

PageLogin.vue

<template>
	<div class="PageLogin">
		<div class="PageLogin_Box">
			<h1 class="PageLogin_Box_Title">ファイターズツール</h1>
			<div class="PageLogin_Box_Input">
				<UIInputText
					type="text"
					placeholder="メールアドレスを入力"
					size="large"
					@change="onChangeEmail"
				/>
			</div>
			<div class="PageLogin_Box_Input">
				<UIInputText
					type="password"
					placeholder="パスワードを入力"
					size="large"
					@change="onChangePassword"
				/>
			</div>
			<div class="PageLogin_Box_Btn">
				<UIAppButton
					color="danger"
					size="large"
					arrow
					@click="onClickLogin"
				>
					ログイン
				</UIAppButton>
			</div>
		</div>
	</div>
</template>

<script>
import { mapState } from 'vuex';
import UIAppButton from '../UIAppButton';
import UIInput from '../UIInput';

export default {
	components: {
		UIAppButton,
		UIInput
	},
	data() {
		return {
			email: String,
			password: String
		};
	},
	computed: {
		...mapState(['user'])
	},
	methods: {
		onChangeEmail(email) {
			this.email = email;
		},
		onChangePassword(password) {
			this.password = password;
		},
		onClickLogin() {
			this.$store.dispatch('user/login', {
				email: this.email,
				password: this.password
			});
		}
	}
};
</script>
<style lang="scss"></style>

StoreUser.js

import firebase from 'firebase';

export default {
	namespaced: true,
	state: {
		id: null,
		name: null,
		userData: []
	},
	mutations: {},
	actions: {
		login(email, password) {
			console.log(email, password);
			if (email && password) {
				firebase
					.auth()
					.signInWithEmailAndPassword(
						email.toString().trim(),
						password.toString().trim()
					)
					.then(
						user => {
							alert('Success!');
							console.log('ログイン成功', user);
						},
						err => {
							alert(err.message);
							let errorCode = err.code;
							let errorMessage = err.message;
							console.log(
								'ログイン失敗: ' +
									errorCode +
									', ' +
									errorMessage
							);
						}
					);
			} else {
				console.log('ログイン失敗: 未入力', email, password);
			}
		}
	}
};

UIInput.vue

<template>
	<input
		class="UIInput"
		:type="type"
		:placeholder="placeholder"
		:value="value"
		@change="onChange"
	/>
</template>

<script>
export default {
	props: {
		value: String,
		type: String,
		placeholder: {
			type: String,
			default: 'テキストを入力してください'
		},
		size: String
	},
	data: function() {
		return {};
	},
	computed: {
	},
	methods: {
		onChange(e) {
			this.$emit('change', e.target.value);
		}
	}
};
</script>
<style lang="scss"></style>

その他コード

index.js

import Vue from 'vue';
import view from './views/ViewIndex.vue';
import store from './stores/StoreIndex.js';
import firebase from 'firebase';

Vue.config.productionTip = false;
const config = {
	apiKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxx',
	authDomain: 'xxxxxxxxxx.firebaseapp.com',
	databaseURL: 'https://xxxxxxxxxx.firebaseio.com',
	projectId: 'xxxxxxxxxx',
	storageBucket: 'xxxxxxxxxx.appspot.com',
	messagingSenderId: 'xxxxxxxxxx'
};
firebase.initializeApp(config);

new Vue({
	store,
	render: h => h(view)
}).$mount('#app');

ViewIndex.vue

<template>
	<main class="ViewIndex">
		<PageLogin />
	</main>
</template>

<script>
import PageLogin from './pages/PageLogin';

export default {
	components: {
		PageLogin
	},
	mounted() {
		this.$store.dispatch('init');
	}
};
</script>
<style lang="scss"></style>

StoreIndex.js

import Vue from 'vue';
import Vuex from 'vuex';

import StoreUser from './modules/StoreUser.js';

Vue.use(Vuex);

export default new Vuex.Store({
	modules: {
		user: StoreUser
	},
	state: {
		modeTemplate: 'index',
	},
	mutations: {
	},
	actions: {
		init: () => {
			console.log('store init');
		}
	}
});

Answer 1

Vuex Actionの第1引数はActionContext、第2引数はPayloadなので、

login(email, password) {
// ...
}

StoreUser.jsの上記の箇所は、

login({ commit }, { email, password }) {
// ...
}

のようにするべきですね。

Comments

[kumakuma112]

動きました。vuexについて勉強不足でした。ありがとうございます。
もう一点、お聞きしたいのですが、
第一引数は基本的に省略できないのでしょうか？

```
login({}, { email, password }) {
// ...
}
```

[yhg]

省略は不可能です。というか、第1引数を使わないならVuexアクションにする意味がありません。
ログイン処理をするにしても、ログインの状態をVuex Stateとして保存して参照出来る形にしないと、ブラウザリロードするまでログアウト状態のままになりますしね。