Q&A
VuexのStateの値（例えば、userやerrorやbusy）をコンポーネントから取得することはできていますか？
また、今回実行できないsignUpUserアクション以外の、loginUserやlogOutアクションは実行できているのでしょうか？
前提・実現したいこと
入力されたユーザー名、メールアドレス、パスワードをsignUpUserのアクション関数を呼び出すことでFirebaseに入力されたそれぞれの値を登録したいです。
元教材： Nuxt & Firebaseではじめる！サーバーレスWebアプリ開発入門
ソースコード（github)： https://github.com/minetti0327/sample-qa
質問：signUpUserのアクション関数をdispatchしても「unknown action type: signUpUser」とコンソールに出力されてdispatchできません。
最終的にコピペもしましたが上手くいかず。どこを見れば良かったでしょうか。
発生している問題・エラーメッセージ
実行できないコード this.$store.dispatch('signUpUser', signUpData);
エラーメッセージ [vuex] unknown action type: signUpUser
該当のソースコード
HTMLタグのところは一般的なユーザー名、メールアドレス、パスワードを入力するフォームです。
pages/signup.vue
<template> <div> <section class="section no-top-pad"> <h5 class="title is-5">サインアップ</h5> <hr /> <div class="columns is-centered is-mobile"> <div class="column is-half-desktop is-full-mobile is-full-tablet"> <form @submit.prevent="onSignUp"> <div class="field"> <label class="label">Name</label> <div class="control"> <input class="input" type="text" name="displayName" v-model="displayName" v-validate="'required|min:4'" :class="{ 'is-danger': errors.has('displayName') }" /> <p v-show="errors.has('displayName')" class="help is-danger" >{{ errors.first('displayName') }}</p> </div> </div> <div class="field"> <label class="label">Email</label> <div class="control"> <input class="input" type="email" name="email" v-model="email" v-validate="'required|email'" :class="{ 'is-danger': errors.has('email') }" /> <p v-show="errors.has('email')" class="help is-danger">{{ errors.first('email') }}</p> </div> </div> <div class="field"> <label class="label">Password</label> <div class="control"> <input class="input" type="password" name="password" v-model="password" v-validate="'required|min:6'" :class="{ 'is-danger': errors.has('password') }" /> <p v-show="errors.has('password')" class="help is-danger" >{{ errors.first('password') }}</p> </div> </div> <div class="field"> <div class="control"> <button type="submit" class="button is-primary" :class="{ 'is-loading': busy }" :disabled="busy" >Signup</button> </div> </div> </form> </div> </div> </section> </div> </template> <script> import apiJobMixin from "@/mixins/apiJobMixin"; export default { data() { return { displayName: "", email: "", password: "" }; }, mixins: [apiJobMixin], methods: { onSignUp() { this.$validator.validateAll().then(result => { if (result) { const signUpData = { displayName: this.displayName, email: this.email, password: this.password }; // ※問題の箇所はここのdispatchです。 // storeで定義したsignUpUserアクションにdispatchしたいのですができません。 // ここまでsignUpDataの値は取得できていました this.$store.dispatch('signUpUser', signUpData); } }); }, jobsDone() { this.removeErrors(); this.$router.replace("/"); } } }; </script>
store/index.vue
export const state = () => ({ user: null, error: null, busy: false, jobDone: false }); export const mutations = { setUser(state, payload) { state.user = payload; }, setError(state, payload) { state.error = payload; }, clearError(state) { state.error = null; }, setBusy(state, payload) { state.busy = payload; }, setJobDone(state, payload) { state.jobDone = payload; } }; export const actions = { // 本来dispatchして発火させたいアクション関数の中身です。 // storeファイルに入っているsignUpUser関数を呼び出せません signUpUser({ commit }, payload) { commit("setBusy", true); commit("clearError"); let newUser = null; const db = this.$fireApp.firestore(); this.$fireApp .auth() .createUserWithEmailAndPassword(payload.email, payload.password) .then(data => { newUser = data.user; return data.user.updateProfile({ displayName: payload.displayName }).then(() => { const authUser = { id: data.user.uid, email: data.user.email, name: data.user.displayName }; commit("setUser", authUser); commit("setJobDone", true); commit("setBusy", false); }); }) .then(() => { let userRef = db.collection("users").doc(newUser.uid); return userRef.set({ email: payload.email, name: payload.displayName, createdAt: new Date().toISOString() }); }) .catch(error => { commit("setBusy", false); commit("setError", error); }); }, loginUser({ commit }, payload) { commit("setBusy", true); commit("clearError"); this.$fireApp .auth() .signInWithEmailAndPassword(payload.email, payload.password) .then(data => { const authUser = { id: data.user.uid, email: data.user.email, name: data.user.displayName }; commit("setUser", authUser); commit("setJobDone", true); commit("setBusy", false); }) .catch(error => { commit("setBusy", false); commit("setError", error); }); }, logOut({ commit }) { this.$fireApp.auth().signOut(); commit("setUser", null); } }; export const getters = { user(state) { return state.user; }, loginStatus(state) { return state.user !== null && state.user !== undefined; }, error(state) { return state.error; }, busy(state) { return state.busy; }, jobDone(state) { return state.jobDone; } };
試したこと
{root: true}などを入力しても上手くいかず（やり方が悪いだけ？）
最終的に元のgithubからコピペを繰り返して見たのですが同様のエラーが出てしまいわかりませんでした。
loginUserもFirebase側でユーザー追加後に試してみましたが同様のエラーを吐きます。そのためlogOutは実行できていません。
Stateはアクション関数実行後に更新されるためまだ見ていません（また確認してみます）
回答1件
0
ベストアンサー
signUpUser以外のアクションを実行できていないようなので、基本的なところで書き方が間違えているかもしれないと思いました。
Storeのファイル名がstore/index.vueとなっていますが、正しくはstore/index.jsではないでしょうか？
サンプルコードの方もそうなっていますし、通常は.jsファイルにすると思います。
sample-qa_index.js at master · minetti0327_sample-qa
投稿2020/02/15 00:02
総合スコア665
>Storeのファイル名がstore/index.vueとなっていますが、正しくはstore/index.jsではないでしょうか？
おっしゃる通りでした！ありがとうございます。無事にfirebaseの方でも動作を確認できました。
全て.vueで処理するものかと脳死しておりました。
おー、解決できてよかったです。
ありがとうございました！
あなたの回答
tips
プレビュー
