Nuxt沒有在refresh / ssr上添加bodyAttr

Question

我的一個布局中有以下代碼。

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

不幸的是，我使用的是舊的bootstrap主題css。 我不想重做它，因此我必須弄清楚一些工作。

引導主題的主題顏色將自身附加到body標簽。 不幸的是身體標簽是nuxt中的no no。

我注意到的是，刷新后頁面將使用基本狀態值進行渲染。

例如：

//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不對身體標簽使用反應性。 因此我覺得使用起來相當安全。 此外，使用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版本嗎？ 自定義存儲請記住在nuxt.config.js中為插件啟用ssr模式