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

Question

我的目标是创建一个“编辑帐户”表单，以便用户可以修改他们的帐户数据。我想以已经填满用户数据的形式呈现帐户数据，即用户名、电子邮件、地址......

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

我正在使用 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"}
    }
});

Answer 1

你是对的，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 会起作用，我觉得这更像是一个围绕设计问题的补丁，可以通过上面的解决方案轻松解决。