使用Nuxt的useHead和visibilitychange事件

Question

在每一页上我都使用

useHead({title: ""});

设置标题。

在layout/default.vue文件中，我添加了：

useHead({
  titleTemplate: title => {
    let titleDefault = 'Company suffix';

    if (title) {
      titleDefault = title +  ' - ' + titleDefault;
    }

    return titleDefault;
  }
});

现在每个标题都添加了后缀。

但是，我尝试根据

visibilitychange

事件更改标题，以通过步骤实现目标：

1. 打开“关于我们”页面，标题为“关于我们-公司后缀”
2. 当我关闭浏览器中的选项卡时，标题应更改为“回来 - 公司后缀”
3. 但是，当我返回选项卡时，标题应该更改为之前的标题，例如“关于我们 - 公司后缀”

下面的代码不起作用，就像我想的那样：

useHead({
  titleTemplate: title => {
    let titleDefault = 'Company suffix';

    if (title) {
      titleDefault = title +  ' - ' + titleDefault;
    }

    document.addEventListener('visibilitychange', () => {
      if (document.hidden) {
        useHead({
          title: 'Come back',
        });
      } else {
        useHead({
          title: title,
        });
      }
    });

    return titleDefault;
  }
});

然后，第 1 步和第 2 步完美运行，但第 3 步不行，什么也不做。怎么解决？

Answer 1

可能是因为标题没有反应性。尝试使用计算标题：

const suffix = "Company suffix";
const pageHidden = ref(false);

const title = computed(() => pageHidden.value ? `Come Back` : `About`)

useHead({title, titleTemplate: (_title) => `${title} - ${suffix}`})
onMounted(() => {
 document.addEventListener('visibilitychange', () => pageHidden.value = document.hidden)
})

我还更改了事件处理程序。在未安装时也将其删除可能会更好