Класс привязки, кажется, не работает должным образом на основе значения присоединенной переменной

Question

Мой banner-visible класс привязки определяется моим вычисляемым свойством showMainBanner:

<div :class="['view view-index', { 'banner-visible' : showMainBanner }]">

Вот как я определяю свое вычисляемое свойство:

computed: {
  showMainBanner () {
    return (Cookies.get('banner_dismiss')) ? false : this.$store.state.config.showMainBanner
  }
}

Когда я перезагружаю страницу, Я могу увидеть значение моего вычисленного свойства, запустив консоль в хуке mounted():

mounted () {
  console.log('showMainBanner = ' + this.showMainBanner)
}

В консоли при загрузке страницы я вижу: showMainBanner = false

Пока что,класс banner-visible все еще существует, несмотря на то, что значение showMainBanner равно false.

Как это возможно?

Самое удивительное: когда я перемещаюсь по странице по ссылкеи вернуться к нему по ссылке, эта проблема не возникает.Но если я обновляю страницу, это происходит.

РЕДАКТИРОВАТЬ:

Я изменил свой код на что-то еще более явное:

showMainBanner () {
  if (Cookies.get('banner_dismiss')) {
    console.log('RETURN FALSE')
    return false
  } else {
    console.log('RETURN TRUE')
    return this.$store.state.config.showMainBanner
  }
}

После обновления страницы я вижув консоли RETURN FALSE и я все еще вижу showMainBanner = false из console.log() звонка в mounted() ловушке.Очевидно, что showMainBanner определенно равно false.

Здесь происходит черная магия?

Answer 1

Ваша проблема в том, что ваш файл cookie возвращает строку:

console.log(typeof Cookies.get('banner_dismiss'))
//=> string

Попробуйте изменить ваше состояние, как:

computed: {
  showMainBanner () {
    let dismiss = Cookies.get('banner_dismiss') === 'undefined' ? false : JSON.parse(Cookies.get('banner_dismiss'))
    return dismiss ? false : this.$store.state.config.showMainBanner
  }
}

---

Или, если вы хотите избежать ошибок JSON в случае пустого Cookie, вы можете добавить простое условие:

computed: {
  showMainBanner () {
    let dismiss = Cookies.get('banner_dismiss') === 'true'
    return dismiss ? false : this.$store.state.config.showMainBanner
  }
}

Answer 2

Cookies не реагирует.После первой оценки showMainBanner он не оценивается снова Vue.

Когда вы уходите и возвращаетесь, Vue снова оценивает вычисленное свойство, и на этот раз Cookie уже установлен.