Nuxt 不会在刷新/ssr 时添加 bodyAttr

Question

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

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

不幸的是，我使用的是旧的引导程序主题 CSS。我不想重做，因此我必须找出一些解决方法。

引导主题的主题颜色将自身附加到正文标记。不幸的是，身体标签在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 显示正确的主体属性？

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

Answer 1

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

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

//This is 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 版本？自定义存储 请记住在nuxt.config中为插件启用ssr模式.js