Question

我的目标是创建一个“编辑帐户”表格，以便用户可以修改其帐户数据。我想以一种已经填充用户数据的形式显示帐户数据，即用户名，电子邮件，地址...

然后，用户可以修改表单中的数据并提交此表单，以更新其用户信息。

我正在使用 v-model 将表单输入绑定到数据中名为 accountInfo 的对象，如下所示：

data() {
    return {
        accountInfo: {
                firstName: ''
        }
    }
}

这是我的模板中输入表单的示例：

<input v-model.trim="accountInfo.firstName" type="text" class="form-control" id="first-name" />

该对象中键的值当前为空字符串，但我希望这些值来自名为 userProfile 的对象，该对象是vuex中的state属性。

在“编辑帐户”组件中，我通过导入来映射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"}
    }
});

Answer 1

您是正确的，计算是在调用初始data函数之后求值的。

我解释了Vue's communication channels in another answer，但这是您可以做什么的简单示例。

将Form组件作为呈现逻辑处理，因此它不需要了解商店，而只需接收概要数据作为道具。

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，但我认为这是围绕设计问题的补丁，可以使用上述解决方案轻松解决。

Answer 2

按原样使用v模型绑定输入：

<div id="app">
    <input type="text" v-model="firstName">
</div>

使用已安装的生命周期挂钩设置初始值：

new Vue({
      el: "#app",
      data: {
        firstName: null
      },
      computed: {
        ...mapGetters(["getFirstName"])
      },
      mounted() {
        this.firstName = this.getFirstName
      }
    })

如何为vuex中的数据设置初始值？

2 个答案: