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

Posted 2023-02-22

【中文标题】Vuex 正在将对象参数更改为组件

【英文标题】：Vuex is changing object parameter into a component

【发布时间】：2021-01-17 20:43:30

【问题描述】：

我有一个登录表单，其中输入（电子邮件和密码）是绑定的。单击按钮提交表单时，它会阻止默认行为并使用 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: (...)
$s-s-rContext: (...)
get $attrs: ƒ reactiveGetter()
set $attrs: ƒ reactiveSetter(newVal)
get $listeners: ƒ reactiveGetter()
set $listeners: ƒ reactiveSetter(newVal)
get form: ƒ proxyGetter()
set form: ƒ proxySetter(val)
__proto__: Vue

【问题讨论】：

能否请您添加与“它控制台出一个Vue组件”对应的控制台日志？另外，您将method="POST" 分配给表单是否有任何具体原因？

@RenaudTarnec 好吧，我已经编辑了问题并添加了相应的日志记录。啊，不，不是真的......我正在使用firebase，我认为它不需要method="POST"。我刚刚从其他地方复制粘贴了表单

如果将<form @submit.prevent="login" method="POST"> 更改为<div> 并将按钮更改为<button class="btn btn-primary" @click="login">Login</button> 会发生什么

@RenaudTarnec 结果还是一样

另请注意，文档中说将...mapActions 放入methods 而不是computed。我不知道这在这种情况下是否重要，因为在computed 中不禁止返回函数。

【参考方案1】：

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

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