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

我的目标是创建一个“编辑帐户”表单，以便用户可以修改其帐户数据。我想在一个已经填写了用户数据的表单中显示帐户数据，即用户名、电子邮件、地址

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

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

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

import { mapState } from 'vuex';

export default {
  name: 'EditAccount',
  computed: {
    ...mapState(['userProfile'])
  },
  data() {
    return {
      accountInfo: {
        firstName: ''
      }
    }
  }
  mounted() {
    this.accountInfo.firstName = this.userProfile.firstName;
  }
};

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

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

然后在计算属性中使用以下命令

computed: {
    ...mapState(["userProfile"])
}

我想做的不是将空字符串作为accountInfo的值，而是从vuex映射的userProfile computed属性中为它们赋值，如下所示：

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>

您是对的，在调用初始的

data

函数后，将对计算结果进行评估

快速修复 在评论中，有以下内容：

---

$store

应在调用数据函数之前准备好。因此，

firstName:this.$store.state.userProfile.firstName

应该可以正常工作

真的需要计算机吗？ 请参阅，其中可以在

已安装的

生命周期挂钩中设置初始值

对于您的代码，它将如下所示：

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

import { mapState } from 'vuex';

export default {
  name: 'EditAccount',
  computed: {
    ...mapState(['userProfile'])
  },
  data() {
    return {
      accountInfo: {
        firstName: ''
      }
    }
  }
  mounted() {
    this.accountInfo.firstName = this.userProfile.firstName;
  }
};

虽然它可能只渲染一次，但不带值，并在装入后重新渲染

容器与表示 我会解释，但这里有一个简单的例子，说明你能做些什么

将表单组件视为表示逻辑，因此它不需要了解存储，而是将概要文件数据作为道具接收

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>

从“vuex”导入{mapState，mapActions}；
导出默认值{
组件：{EditAccount}，
计算：mapState（['userProfile']），
方法：mapActions（['saveUserProfile']）
}

---

虽然，

this.$store.state.userProfile.firstName将起作用，但我觉得这更像是一个围绕设计问题的补丁，可以通过上述解决方案轻松解决。
将您的输入与v-model绑定，就像您以前一样：



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

从“Vue”导入Vue；
从“vuex”导入{mapGetters}；
新Vue({
el:“应用程序”，
数据：{
名字：空
},
计算：{
…映射获取程序（[“getFirstName”]）
},
安装的（）{
this.firstName=this.getFirstName
}
})
使用
this.userProfile
。这可能是原因，但如果没有，我们将无能为力。是否将存储传递给根Vue实例？请参阅
$store
中的说明，在调用
数据
函数之前，存储应准备就绪。因此，
firstName:this.$store.state.userProfile.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>