nuxt3 layout导航栏切换问题

nuxt3 layout导航栏切换问题

最近在玩nuxt3，遇到一个问题，我按照官方文档使用的layouts文件夹，然后下面使用了了多个页头页脚

然后在app.vue是这么配置的

<template>
  <script setup> 
	import { useCookieStore } from "@/store/index";
	// 引入 Store
	const cookieStore = useCookieStore();
	const layout = ref("anonsms");
	
	layout.value = useCookie("layout", { default: () => "anonsms" });
  </script>

  <div class="app-view">
    <NuxtLayout :name="layout">
      <NuxtPage />
    </NuxtLayout>
    <Footer />
  </div>
</template>

在pinia里面是这么配置的
store/index.ts

import { defineStore } from "pinia";

// 页头页脚控制
export const useCookieStore = defineStore("cookieStore", {
  state: () => ({
    layout: useCookie("layout", {
      default: () => "anonsms",
    }),
  }),
  actions: {
    setLayout(newValue: string) {
      this.layout = newValue;
      useCookie("layout").value = newValue;
    },
  },
});

代码是正常运转，使用也很流畅，如果页面更新的话只需要更新cookie的值就行
像这样，直接在setup中写

index.vue

import { useCookieStore } from "@/store/index";
// 引入 Store
const cookieStore = useCookieStore();
cookieStore.setLayout("anonsms");

那么，问题来了

按道理它会在服务端运行完，然后渲染，SEO爬取的应该是判断之后生成的内容

但是，我这么配置之后SEO死活都抓不到，抓到的一直是默认值那个导航栏

最后研究了很久，只能把导航栏在页面写死，唉

大家有什么办法吗