Nuxt 没有在刷新/ssr 时添加 bodyAttr

Question

我的一个布局中有以下代码。

bodyAttrs: {
    class: this.$store.state.user.theme + '-scheme'
}

不幸的是，我使用的是旧的引导主题 c​​ss。我不想重做，所以我必须想出一些解决方法。

bootstrap 主题的主题颜色附加到 body 标记。不幸的是，body 标签在 nuxt 中是不可以的。

我注意到的是，刷新页面时会使用基本状态值呈现。

例子：

//store/index.js <- not modular
var state = () => ({
   user: {
    id: 0,
    avatar: 'default.jpg',
    status: 'offline',
    nickname: 'Guest',
    admin: false,
    theme: 'brownish' //-> this is the value
  }
})

整个页面使用用户详细信息进行渲染，但主题变量未放入渲染中。如果我转到另一个页面（ajax 路由），页面将更新为正确的颜色。

基本上页面加载为棕色，然后在后续页面上加载为蓝色。如果页面被刷新，那么颜色会恢复为棕色，然后在后续页面上它会再次变为蓝色。

如何让 SSR 显示正确的 bodyAttr？

我正在使用 vuex-persistedstate 和 cookie 都是客户端 nuxt 服务器没有任何会话，因为这是在单独的域（api）上处理的

Answer 1

我找不到纯 vuejs 的方法来做到这一点，所以我做了一个修复。

这在技术上是个坏主意，因为它直接修改了 DOM，这在 vue 中是一个禁忌。但是，vue 不会在 body 标签上使用反应性。因此我认为使用起来相当安全。此外，使用 vuex-presistedstate 将确保 vue 在后续加载时设置正确的状态变量..

//这是 layouts/default.vue

head() {
 return {
  bodyAttrs: {
    class: this.$store.state.user.theme + '-scheme'
  }
 }
},
mounted() {
 window.onNuxtReady(() => {
  document.body.className = this.$store.state.user.theme + '-scheme'
 })
}

Answer 2

您是否使用基于 cookie 的 vuex-persistedstate 版本？ Customize Storage 记得在nuxt.config.js中为插件开启ssr模式