Vuex 正在将对象参数更改为组件

Question

我有一个登录表单，其中输入（电子邮件和密码）是绑定的。单击按钮提交表单时，它会阻止默认行为并使用 Login.vue 中定义的login 方法；脚本。

在 Login.vue 中进行安慰时；脚本； login 方法，form 数据打印出{email: 'email', password: 'password'} 对象（所需）。一旦它被传递给操作（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 - 身份验证模块

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

Answer 1

正如 Sumurai8 所说，我只需要将 ...mapActions('auth', ['signIn']) 放入 methods 而不是 computed。

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