Javascript Vue JS-在模板之前呈现getter

我得到TypeError“无法读取未定义的属性‘email’”，因为模板似乎在getter返回值之前呈现。该值实际上是未定义的，因为它在存储中初始化为未定义。但是在模板呈现之后，该值确实返回了一些内容。在模板之后，是否仍可以使用getter渲染

我的代码：

<template>
  <div>
    <Success :title="'title name'"
             :subtitle="`your email is ${schoolDetails.email}.`"
             :button-text="'button text'"
             :button-link="ROUTE_NAMES_HK_ADMIN.SCHOOL_DETAILS"/>
  </div>
</template>

<script>
import {ROUTE_NAMES_HK_ADMIN} from "@/router/modules/hkAdmin";
import Success from "@/components/partials/Success";
import {GET_SCHOOL_BY_ID} from "@/store/manager/actions";

export default {
  name: "SchoolCreateSuccess",
  components: {Success},
  data: () => ({
    ROUTE_NAMES_HK_ADMIN
  }),
  computed: {
    schoolDetails: function () {
      return this.$store.getters.getSelectedSchool;
    },
  },
  methods: {
    getSchoolDetails: function (schoolId) {
      this.$store.dispatch(GET_SCHOOL_BY_ID, schoolId);
    }
  },
  created() {
    this.getSchoolDetails(this.$route.params.id);
  }
}

从“@/router/modules/hkAdmin”导入{ROUTE_NAMES_HK_ADMIN}”；
从“@/components/partials/Success”导入成功；
从“@/store/manager/actions”导入{GET_SCHOOL_BY_ID}；
导出默认值{
名称：“SchoolCreateSucture”，
组件：{Success}，
数据：（）=>({
路线\姓名\香港\管理员
}),
计算：{
学校详情：功能（）{
返回此。$store.getters.getSelectedSchool；
},
},
方法：{
getSchoolDetails:函数（schoolId）{
此.$store.dispatch（通过学校ID获取学校ID）；
}
},
创建（）{
this.getSchoolDetails（this.route.params.id）；
}
}

如何使用伪值初始化schoolDetails变量以实现错误？ 然后，您可能可以使用watch而不是computed来将跟踪schoolDetails变量与存储的数据对齐

所以，也许是这样的：

data: () => ({
  ROUTE_NAMES_HK_ADMIN,
  schoolDetails: {email: ''}
}),
// note: 'watch' track changes (no changes == the function will not be called)
watch: {
  // watch the state, not the getter
  '$store.state.selectedSchool': () => {
    this.schoolDetails = this.$store.getters.getSelectedSchool;
    return;
  }
}