Nuxt не добавляет bodyAttr на обновление / SSR

Question

У меня есть следующий код в одном из моих макетов.

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

к сожалению, я использую старую тему начальной загрузки css.Я не хочу переделывать его как таковой, я должен выяснить некоторые варианты.

Цвет темы для темы начальной загрузки присоединяется к тегу 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

Вы используете версию vuex-persistedstate на основе файлов cookie? Настройка хранилища Не забудьте включить режим ssr для плагина в nuxt.config.js

Answer 2

Я не смог найти чистый способ vuejs сделать это, поэтому я исправил.

Это технически плохая идея, так как она напрямую модифицирует DOM, что не имеет смысла. Однако vue не использует реактивность на теге body. Поэтому я думаю, что это довольно безопасно для использования. Кроме того, использование vuex-presistedstate гарантирует, что vue установит правильную переменную состояния при последующих загрузках.

// Это макеты / default.vue

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