我的目标是创建一个“编辑帐户”表单,以便用户可以修改他们的帐户数据。我想以已经填满用户数据的形式呈现帐户数据,即用户名、电子邮件、地址......
然后用户可以修改表单中的数据并提交此表单以更新其用户信息。
我正在使用 v-model 将表单输入绑定(bind)到我数据中名为 accountInfo 的对象,如下所示:
data() {
return {
accountInfo: {
firstName: ''
}
}
}
这是我模板中的表单输入示例:
<input v-model.trim="accountInfo.firstName" type="text" class="form-control" id="first-name" />
对象中键的值目前是空字符串,但我希望这些值来自一个名为 userProfile 的对象,它是 vuex 中的一个状态属性。
在我的“编辑帐户”组件中,我通过导入映射 vuex 状态:
import { mapState } from "vuex";
然后在计算属性中使用以下内容
computed: {
...mapState(["userProfile"])
}
我想做的不是将空字符串作为 accountInfo 的值,而是从 vuex 映射的 userProfile 计算属性中为它们分配值,如下所示:
data() {
return {
accountInfo: {
firstName: this.userProfile.fristName,
}
}
}
这将为我的表单提供所需的初始数据,但不幸的是这不起作用,大概是因为数据在生命周期中比计算属性更早呈现。
完整代码:
EditAccount.vue
<template>
<div class="container-fluid">
<form id="sign_up_form" @submit.prevent>
<div class="form-row">
<div class="form-group col-md-6">
<input v-model.trim="signupForm.firstName" type="text" class="form-control" id="first_name" />
</div>
</div>
</form>
</div>
</template>
<script>
import { mapState } from "vuex";
import SideBar from "../common/SideBar.vue";
export default {
name: "EditAccount",
computed: {
...mapState(["userProfile"])
},
data() {
return {
accountInfo: {
firstName: this.userProfile.firstName
}
};
}
};
</script>
store.js:
export const store = new Vuex.Store({
state: {
userProfile: {firstName: "Oamar", lastName: "Kanji"}
}
});
最佳答案
你是对的,computeds 在调用初始 data
函数后计算。
快速修复
在评论中,@Jacob Goh mentioned以下内容:
$store
should be ready before data function is called. Therefore,firstName: this.$store.state.userProfile.firstName
should just work.
export default {
name: 'EditAccount',
data() {
return {
accountInfo: {
firstName: this.$store.state.userProfile.firstName
}
}
}
};
真的需要计算吗?
参见 @bottomsnap's answer ,其中可以在 mounted
生命周期钩子(Hook)中设置初始值。
使用您的代码,它看起来像这样:
import { mapState } from 'vuex';
export default {
name: 'EditAccount',
computed: {
...mapState(['userProfile'])
},
data() {
return {
accountInfo: {
firstName: ''
}
}
}
mounted() {
this.accountInfo.firstName = this.userProfile.firstName;
}
};
虽然它可能在没有值的情况下渲染一次,然后在挂载后重新渲染。
容器与展示
我解释Vue's communication channels in another answer ,但这是您可以执行的操作的一个简单示例。
将 Form 组件视为表示逻辑,因此它不需要了解商店,而是将个人资料数据作为 prop 接收。
export default {
props: {
profile: {
type: Object,
},
},
data() {
return {
accountInfo: {
firstName: this.profile.firstName
}
};
}
}
然后,让父级处理业务逻辑,以便从商店获取信息、触发操作等。
<template>
<EditAccount :profile="userProfile" :submit="saveUserProfile"/>
</template>
<script>
import { mapState, mapActions } from "vuex";
export default {
components: { EditAccount },
computed: mapState(['userProfile']),
methods: mapActions(['saveUserProfile'])
}
</script>
同时 Jacob is not wrong saying that the store is ready ,并且 this.$store.state.userProfile.firstName
会起作用,我觉得这更像是一个围绕设计问题的补丁,可以通过上面的解决方案轻松解决。
关于javascript - vuex中的数据如何设置初始值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51063583/