Question

在其中一种布局中，我有以下代码。

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

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

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不会在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模式

Nuxt没有在刷新/ SSR上添加bodyAttr

2 个答案: