使用vuex进行vue app和firebase身份验证

我正在使用firebase身份验证登录用户到我的vue应用程序我正在使用vuex进行状态管理我传递登录 actions 所需的逻辑firebase代码我的 store.js 文件中提交了一个确认登录状态的突变 .

store.js

import Vue from 'vue'
import Vuex from 'vuex'
import * as firebase from 'firebase'

Vue.use(Vuex);

export const store = new Vue.Store({
state: {
    loggedIn: false,
    userName: 'Guest',
    errorMessage: ''
},
getters: {

},
mutations: {
    m_logInUser: (state) => {
        state.loggedIn = true;
    }
},
actions: {
    a_logInUser: ({state, dispatch}, user) => {
        firebase.auth().signInWithEmailAndPassword(user.e, user.p).catch(function(error) {
            // Handle Errors here.
             state.errorMessage = error.message;
        });
        dispatch('a_authStateObserver');
    },
    a_authStateObserver: ({commit, state}) => {
        firebase.auth().onAuthStateChanged(function(user) {
            if (user) {
                // User is signed in.
                var displayName = user.displayName;
                state.userName = user.email;
                commit('m_logInUser');
                alert("you logged in");
            } else {
                // User is signed out.
                // ...
            }
        });
    }
}
});

my login.vue file

<template>
<div class="container">
<div class="row">
    <div class="form_bg center-block">
        <form @submit.prevent="a_logInUser({e: email, p: password})">
             <h3 class="text-center">Log in</h3>
            

            <div class="form-group">
                <input v-model="email" type="email" class="form-control" placeholder="Your Email">
            </div>
            <div class="form-group">
                <input v-model="password" type="password" class="form-control" placeholder="Password">  
                </div>
               <div class="align-center">
            <button type="submit" class="btn btn-success center-block">Log in</button>
                </div>
        </form>
        <br>
        <p style="display:inline-block">Don't have an account?</p>
        <router-link to="/signup" tag="a" style="display:inline-block">Sign up</router-link>
    </div>
</div>

<script>
import { mapActions } from 'vuex'
export default{
    data(){
        return{
            email: '',
            password: ''
        };
    },
    methods: {
        ...mapActions([
            'a_logInUser'
        ])
    }
}
</script>

当我运行应用程序时，我得到一个空白的屏幕，控制台显示以下错误消息

Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_0_vue___default.a.Store is not a constructor
at eval (eval at <anonymous> (build.js:1123), <anonymous>:13:13)
at Object.<anonymous> (build.js:1123)
at __webpack_require__ (build.js:660)
at fn (build.js:84)
at eval (eval at <anonymous> (build.js:1051), <anonymous>:12:71)
at Object.<anonymous> (build.js:1051)
at __webpack_require__ (build.js:660)
at fn (build.js:84)
at Object.<anonymous> (build.js:1632)
at __webpack_require__ (build.js:660)
http://localhost:8080/favicon.ico Failed to load resource: the server    responded with a status of 404 (Not Found)

what am i doing wrong,whether the method i am following is correct or is there any better approach