Question

我有一个具有以下内容的组件UserSettingsGeneral.vue：

<template>
   <vx-card no-shadow>
        <vs-input
            v-validate="'required|alpha_spaces|min:3'"
            data-vv-validate-on="blur"
            name="username"
            class="w-full"
            label-placeholder="Username"
            v-model="username" />
        <span class="text-danger text-sm">{{ errors.first('username') }}</span>

    <div class="flex flex-wrap items-center justify-end">
        <vs-button class="ml-auto mt-2" :disabled="!validateForm" @click="updateUser">Save Changes</vs-button>
    </div>
   </vx-card>
</template>

然后单击“保存更改”按钮，我将方法称为“ updateUser”：

export default {
    data () {
        return {
            username: this.$store.state.AppActiveUser.username,
        }
    },
    methods: {
       updateUser () {

            const payload = {
                userDetails: {
                    username: this.username
                },
            }

            console.log('updateUser method from UserSettingsGeneral - payload: ' + payload)

            this.$vs.loading()

            this.$store.dispatch('auth/updateUser')
                .then((response) => {
                    this.$vs.loading.close()
                    this.$vs.notify({
                        time: 10000,
                        title: 'Update Success',
                        text: response.message.data.message,
                        iconPack: 'feather',
                        icon: 'icon-success-circle',
                        color: 'success'
                    })
                })
                .catch(error => {
                    this.$vs.loading.close()
                    this.$vs.notify({
                        time: 6000,
                        title: 'User Update Error',
                        text: error.message,
                        iconPack: 'feather',
                        icon: 'icon-alert-circle',
                        color: 'danger'
                    })
                })
        },
    }

在控制台中，我可以将有效负载视为“对象对象”，但是在调用此之后。$ store.dispatch（'auth / updateUser'）有效负载为空。

文件auth / moduleAuthActions.js具有updateUser操作：

updateUser( { commit }, payload) {
    return new Promise((resolve, reject) => {

        jwt.updateUser(payload.userDetails.username)
            .then(response => {

                if (response.status == 401) {
                    reject({message: response.data.error})
                }

                if (response.status === 200) {
                    commit('UPDATE_USER_INFO', payload.userDetails, {root: true})
                    resolve({message: response})
                }

                resolve(response)
            })
            .catch(error => { reject(error) })
    })
},

现在我遇到错误：TypeError：无法读取未定义的属性'userDetails'，因为这里没有有效负载（空）：jwt.updateUser（payload.userDetails.username）

有什么建议吗？

Answer 1

您的有效载荷是正确的。唯一的问题是您在调用dispatch时没有传递有效负载。

请按照以下updateUser方法更新操作分派：

this.$store.dispatch('auth/updateUser', payload)

调用动作（vuex）时有效负载未通过-TypeError：无法读取未定义的属性'userDetails'

1 个答案: