vue.js - ElementUI 消息框内使用的 vue 组件无法访问 vuex 存储

Question

我正在尝试将elementUI 消息框与一个简单的组件一起使用。该组件应该简单地访问商店并显示用户名：

// 'MyCmp.vue'
<template>
  <div>
    <p>Name: {{fullname}}</p>
  </div>
</template>

<script>
export default {
  computed: {
    fullname() {
      return this.$store.getters.fullname;
    }
  }
};
</script>

但问题是我可以在框中看到硬编码字符串：“名称”，但无法访问$store因为thisis undefined。这是我的消息框的完整代码：

showMessageBox(userAction) {
  const h = this.$createElement;
  MessageBox.prompt(this.$t("insertEmail"), {
    message: h(myCmp, {key: this.key++}))
  })
    .then(({ value }) => {
      console.log("in");
      MessageBox.message({
        type: "success",
        message: "yourEmailIs" + value
      });
    })
    .catch(() => {
      console.log("error");
      MessageBox.message({
        type: "info",
        message: "cancel"
      });
    });
}

我希望它能够根据他们提供的文档和官方文档jsfiddle工作 ，我在实施过程中遵循了这些文档。知道为什么我无法访问组件内部未定义的$store/吗？this

更新： jsfiddle

标签： vue.jselement-ui