访问<script>标记中的全局计算属性

Question

Vuepress定义了一些无法在模板中使用的全局属性，例如$page或$site。

https://github.com/vuejs/vuepress/blob/master/packages/docs/docs/guide/global-computed.md

我可以在<template>节点中使用它们，但是尝试在<script>中使用它们会引发错误。

<template>
  <div class="page">
    <div class="content">
      <div>{{ $page.frontmatter.description }} Works fine</div>
      <div>{{ $frontmatter.description }} Does not work despite what's in docs</div>
      <div>{{ description }} Doesn't work</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return { 
      description: this.$page.frontmatter.description, //not defined
      description2: $page.frontmatter.description, //nor this
    };
  },
};
</script>

Answer 1

您的问题不是关于在<script>标记内使用Vuepress Global Computed Properties，而是关于在data() 内使用 Vuejs Computed Properties。

如果仅创建一个Vue组件（如下面的代码片段），则会发现变量testMessage也未定义。

<template>
  <div>{{ testMessage }}</div>
</template>

<script>
export default {
  data() {
    return {
      testMessage: this.test
    }
  },
  computed: {
    test: function() {
      return 'This is a test';
    }
  }
}
</script>

我不知道确切的原因，但我相信这与Vue实例的生命周期有关。因此，我建议您只需在计算的属性或方法内访问全局计算的属性：

<template>
  <div>{{ description }}</div>
</template>

<script>
export default {
  computed: {
    description : function() {
      return this.$page.frontmatter.description;
    }
  }
}
</script>