У меня есть форма входа в систему и где привязаны входные данные (электронная почта и пароль). При нажатии кнопки для отправки формы она предотвращает поведение по умолчанию и использует login метод, определенный в Login.vue; Скрипты.

При утешении в Login.vue; Скрипты; login метод, form данные распечатали {email: 'email', password: 'password'} объект (желаемый). Как только он передается в action ( await this.signIn(this.form) ), он внезапно выдает компонент Vue. Я не понимаю, почему это произошло и как это можно решить?

Компонент Login.vue

Форма

 <form @submit.prevent="login" method="POST">
    <input
        type="text"
        v-model="form.email"
    />
    <input
        type="password"
        v-model="form.password"
    />

    <button class="btn btn-primary">Login</button>
</form>
  

Скрипты

 <script>
import { mapActions } from 'vuex'

export default {
    data() {
        return {
            form: {
                email: '',
                password: '',
            },
        }
    },
    computed: {
        ...mapActions('auth', ['signIn']),
    },
    methods: {
        async login() {
            /***************************************
            *                                      *
            *    Print out the form data object    *
            *                                      *
            ****************************************/
            console.log(this.form)
            await this.signIn(this.form)
        },
    },
}
</script>
  

Модуль Vuex — Auth

 export const actions = {
    signIn({ dispatch, commit }, form) {
        /***************************************************************
        *                                                              *
        *    Print out a Vue component instead of the passed object    *
        *                                                              *
        ****************************************************************/
        console.log(form)
        Auth.signInWithEmailAndPassword(form.email, form.password)
            .then(user => {
                commit('SET_AUTHENTICATED', true)
                commit('SET_USER', user.user)
                this.$router.push('/')
            })
            .catch(err => {
                console.log(err)
            })
    },
}
  

Содержимое консоли, зарегистрированное в журнале

 VueComponent {_uid: 4, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}
$attrs: (...)
$children: []
$createElement: ƒ (a, b, c, d)
$el: div
$listeners: (...)
$options: {parent: VueComponent, _parentVnode: VNode, propsData: undefined, _parentListeners: undefined, _renderChildren: undefined, …}
$parent: VueComponent {_uid: 3, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}
$refs: {}
$root: Vue {_uid: 2, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …}
$scopedSlots: {$stable: true, $key: undefined, $hasNormal: false}
$slots: {}
$store: Store {_committing: false, _actions: {…}, _actionSubscribers: Array(1), _mutations: {…}, _wrappedGetters: {…}, …}
$vnode: VNode {tag: "vue-component-4", data: {…}, children: undefined, text: undefined, elm: div, …}
form: (...)
login: ƒ ()
signIn: (...)
__VUE_DEVTOOLS_UID__: "1:4"
_c: ƒ (a, b, c, d)
_computedWatchers: {signIn: Watcher}
_data: {__ob__: Observer}
_directInactive: false
_events: {hook:beforeDestroy: Array(1)}
_hasHookEvent: true
_inactive: null
_isBeingDestroyed: false
_isDestroyed: false
_isMounted: true
_isVue: true
_renderProxy: Proxy {_uid: 4, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}
_routerRoot: Vue {_uid: 2, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …}
_self: VueComponent {_uid: 4, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}
_staticTrees: null
_uid: 4
_vnode: VNode {tag: "div", data: undefined, children: Array(2), text: undefined, elm: div, …}
_watcher: Watcher {vm: VueComponent, deep: false, user: false, lazy: false, sync: false, …}
_watchers: (2) [Watcher, Watcher]
$data: (...)
$isServer: (...)
$props: (...)
$route: (...)
$router: (...)
$ssrContext: (...)
get $attrs: ƒ reactiveGetter()
set $attrs: ƒ reactiveSetter(newVal)
get $listeners: ƒ reactiveGetter()
set $listeners: ƒ reactiveSetter(newVal)
get form: ƒ proxyGetter()
set form: ƒ proxySetter(val)
__proto__: Vue
  

Как упоминал Sumurai8, мне нужно только ввести ...mapActions('auth', ['signIn']) методы in, а не in computed .

    methods: {
        ...mapActions('auth', ['signIn']),
        async login() {
            console.log(this.form)
            await this.signIn(this.form)
        },
    },