javascript - 在 Vue 中更新计算属性(表单)时出错？

Question

好吧，我跟着整个 Vue Laracasts 视频学习，最终得到了一个 Form 和一个 Errors 类。以下是视频中该存储库的 github 链接:

https://github.com/laracasts/Vue-Forms/blob/master/public/js/app.js

现在我想做的是集成 Vuex 来跟踪我当前登录的用户，用当前值预填充表单，并在任何 Laravel 验证失败时显示错误。

我似乎遇到的问题是我必须将 authUser 设置为计算属性，才能从 Vuex 存储中提取它。然后，由于我无法在数据中设置的任何内容中使用它们，因此我必须将表单移至计算属性。现在它是一个计算属性，它永远不会更新，因此即使抛出错误，我的表单也不会出现错误。

这是我的路由文件Account.vue

<template>
<div>
    <form @submit.prevent="onSubmit" @keydown="form.errors.clear($event.target.name)">
        <div class="row">
            <div class="form-group col-md-6 col-lg-3">
                <label>Name</label>
                <input type="text" class="form-control" name="user" autocomplete="false" v-model="form.name">
                <span class="help is-danger" v-if="form.errors.has('name')" v-text="form.errors.get('name')"></span>
            </div>
            <div class="form-group col-md-6 col-lg-3">
                <label>Email address</label>
                <input type="email" class="form-control" placeholder="Enter email" autocomplete="false" name="email" v-model="form.email">
                <span class="help is-danger" v-if="form.errors.has('email')" v-text="form.errors.get('email')"></span>
            </div>
            <div class="form-group col-lg-3">
                <label>Password</label>
                <input type="password" class="form-control" placeholder="Password" autocomplete="false" name="password" v-model="form.password">
                <span class="help is-danger" v-if="form.errors.has('password')" v-text="form.errors.get('password')"></span>
            </div>
        </div>

        <div class="col-12">
            <button type="submit" class="btn btn-primary">Submit</button>
        </div>
    </form>
</div>
</template>

<script>
export default {
    computed: {
        authUserName: {
            get: function() {
                return this.$store.getters.getAuthUser.name;
            },
            set: function(value) {
                this.$store.commit('setAuthUserValue', { key: 'name', value })
            }
        },
        authUserEmail: {
            get: function() {
                return this.$store.getters.getAuthUser.email;
            },
            set: function(value) {
                this.$store.commit('setAuthUserValue', { key: 'email', value })
            }
        },
        form() {
            return new Form({
                name: this.authUserName,
                email: this.authUserEmail,
                password: ''
            })
        }
    },

    data() {
        return {

        }
    },

    mounted() {
    },

    methods: {
        onSubmit() {
            this.form
                .patch('/current-user')
                .then(status => {
                    this.$emit('success', status);
                });
        }
    }
}
</script>

index.js

import AuthUser from "../models/AuthUser";

export default new Vuex.Store({
state: { // = data
    authUser: {
        name: null,
        email: null,
    }
},

getters: { // = computed properties
    getAuthUser(state, getters) {
        return state.authUser;
    }
},

actions: { // = methods
    fetchAuthUser(context) {
        AuthUser.load(user => {
            context.commit('setAuthUser', user);
        });
    }
},

mutations: {
    setAuthUser(state, user) {
        Vue.set(state, 'authUser', user);
    },
    setAuthUserValue(state, payload) {
        state.authUser = { ...state.authUser, payload }
    }
}
});

app.js

import router from './routes';
import Hamburger from './components/Hamburger';
import NavHeader from './components/NavHeader';
import store from "./store/index";

new Vue({

el: '#app',
components: {
    Hamburger,
    NavHeader
},

data() {
    return {

    }
},

created() {
    store.dispatch('fetchAuthUser');
},
router,
store
});

我尝试过与观察者搞混，但一切都会引发错误。我非常努力地尝试使用预设的现有用户值创建表单，并建议尝试 vuex，但我现在遇到了这些问题，其中表单现在需要计算而不是在数据中设置，因此表单永远不会现在有错误。抱歉，一下子学习所有这些新东西让我抓狂，哈哈。

编辑

我现在还尝试将表单设置为数据中的空表单对象，然后在 Mounted() 中设置属性，但无论我如何尝试访问 Mounted 中的 authUser，我都无法定义。

mounted() {
    console.log(this.authUser);
    console.log(this.authUser.name);
    console.log(this.$store.getters.getUser.name);
},

输出...

{ob: Observer}

undefined

undefined

编辑2

更新了最新代码，尽管错误确实显示在开发工具下，但仍然没有在输入下方显示错误。根>帐户>计算>表单>错误>错误

如果我将名称和电子邮件留空，它会列出它们。可能是因为它是双重嵌套的吗？我知道这是一个 Laravel 问题，涉及如何嵌套 json 响应。

也许 app.js 中的 Form 或 Errors 类中有什么内容？

Answer 1

AuthUser.load 是一个异步函数，当您在created Hook 中执行它时，不能保证 authUsers 值将在触发 Account.vue 的 created Hook 时设置。

现在您遇到的问题是由于您有一个没有 setter 的计算属性。 Form 类尝试直接改变存储的值，这将导致控制台爆炸。

如果您为您的值提供一个 setter ，当您尝试写入它时，您可以对传递给 setter 的值使用react，并且您可以调度 (或者在您的情况下，将该值提交到商店:

computed: {
   authUser: {
      get(): {
          return this.$store.getters.getUser;
      },
      set(value): {
          this.$store.commit('setUser', value)
      }
   }
}

但是等等，这仍然行不通!为什么？因为您将收到的值只是文本输入值，所以您如何知道要更新 AuthUser 中的哪个属性？解决这个问题的最简单方法可能是为 authUser 上的每个属性创建一个计算属性

computed: {
   authUserName: {
      get(): {
          return store.getters.getUser.name;
      },
      set(value): {
          this.$store.commit('setUser', { key: 'name', value })
      }
   },
   authUserEmail: {
      get(): {
          return store.getters.getUser.email;
      },
      set(value): {
          this.$store.commit('setUser', { key: 'email', value })
      }
   },
   authUserPassword: {
      get(): {
          return store.getters.getUser.password;
      },
      set(value): {
          this.$store.commit('setUser', { key: 'password', value })
      }
   }
}

现在您可以使用每个 getter 实例化表单:

new Form({
    name: this.authUserName,
    email: this.authUserEmail,
    password: this.authUserPassword
})

但是，这仍然行不通!我们需要一个新的突变，它只会写入 authUser

的属性

setUserValue(state, payload) {
   state.authUser = { ...state.authUser, payload }
}

通过使用简单的解构，我们可以覆盖 authUser 的属性并合并计算属性的新值。

现在您需要更新计算属性并使用this.$store.commit('setUserValue', { key: 'name/email/password': value}) 改为在您的 setter 中。

最后，您的 authUser 应该是一个具有预设属性的对象:

authUser: {
    name: null,
    email: null,
    password: null
}

这很重要，因为对象的属性是 react 性的。但是，如果将属性添加到对象中，您不能简单地覆盖该对象并拥有新的 react 属性。为此，您需要使用 Vue.set()，例如:

setUser(state, user) {
    Vue.set(state, 'authUser', user)
}

这将正确地允许观察到的属性变得活跃。这是 VueX 商店 react 性中的一个重要概念。这也是您的值未定义的原因。