访问标记中的全局计算属性<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全局计算属性，而是在data()中使用Vuejs计算属性。

如果您简单地创建一个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>