好的，所以我跟着整个Vue Laracasts视频，最终有一个表单和一个错误类。这是视频中存储库的 github 链接：
https://github.com/laracasts/Vue-Forms/blob/master/public/js/app.js
现在我要做的是集成 Vuex 来跟踪我当前登录的用户，用当前值预填充表单，并在任何 Laravel验证失败时显示错误。
我似乎遇到的问题是我必须将我的 authUser 设置为计算属性，才能将其从 Vuex 存储中提取。然后，由于我不能在数据中的任何设置中使用这些，因此我不得不将表单移动到计算属性。现在它是一个计算属性，它永远不会更新，所以即使抛出错误，我的表单也不会出错。
这是我的路由文件帐户.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>
索引.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 }
}
}
});
应用.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((中设置属性，但是无论我如何尝试在挂载中访问authUser，我都无法定义。
mounted() {
console.log(this.authUser);
console.log(this.authUser.name);
console.log(this.$store.getters.getUser.name);
},
输出。。。
{ob： Observer}
定义
定义
编辑 2
更新了最新的代码，仍然没有让错误显示在输入下方，尽管它们确实显示在开发工具下。 根>帐户>>形式计算>错误>错误
在那里，如果我将它们留空，它会列出名称和电子邮件错误。可能是因为它是双重嵌套的吗？我知道这是一个 Laravel 问题，它如何嵌套 json 响应。
也许应用程序中的表单或错误类中的某些内容.js？
AuthUser.load是一个asynchronous函数，当你在created钩子中执行它时，不能保证在触发Account.vue的created钩子时会设置authUsers值。
现在，您遇到的问题是由于您有一个没有setter的计算属性。Form类尝试mutate the value of the store directly，这将导致控制台爆炸。
如果为值提供setter，则在尝试写入该值时，可以对传递给setter的值做出反应，并且可以将该值调度(或提交(到存储区：
computed: {
authUser: {
get(): {
return this.$store.getters.getUser;
},
set(value): {
this.$store.commit('setUser', value)
}
}
}
但是等等，这仍然行不通！为什么？由于您将收到的值只是文本输入值，因此您如何知道要更新AuthUser中的哪个属性？解决此问题的最简单方法可能是创建一个computed property for each property on the 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的属性并合并计算属性的新值。
现在你需要更新你的computed properties，并在你的二传手中使用this.$store.commit('setUserValue', { key: 'name/email/password': value})。
最后，您的authUser应该是具有预设属性的对象：
authUser: {
name: null,
email: null,
password: null
}
这很重要，因为properties of an object are reactive.但是，如果将属性添加到对象中，则you cannot simply overwrite the object and have new reactive properties。为此，您需要使用Vue.set()，例如：
setUser(state, user) {
Vue.set(state, 'authUser', user)
}
这将正确地允许观察到的属性变得反应性。这是 VueX 商店反应性中的一个重要概念。这也是你的价值观undefined的原因。