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

但是，尽管showMainBanner的值为false，banner-visible类仍然存在。

那怎么可能？

最令人困惑的是：当我通过链接导航页面，然后通过链接回到页面时，不会发生此问题。但是，如果我刷新页面，它就可以。

编辑：

我将代码更改为更明确的内容：

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

2019-03-28 11:04:35 DEBUG SSHKeyConnector:? - Key file added to session 2019-03-28 11:04:35 DEBUG SSHKeyConnector:? - CreateSession failed: null com.jcraft.jsch.JSchException: USERAUTH fail at com.jcraft.jsch.UserAuthPublicKey.start(UserAuthPublicKey.java:119) at com.jcraft.jsch.Session.connect(Session.java:470) at com.jcraft.jsch.Session.connect(Session.java:183) at com.floristpro.migrate.dao.utilities.SSHKeyConnector.createSession(Unknown Source) at com.floristpro.migrate.dao.RemoteAccessDAO.downloadDBandImages(Unknown Source) at com.floristpro.migrate.service.RemoteAccessService.downloadDBandImages(Unknown Source) at com.floristpro.migrate.DataDownload.run(Unknown Source) at com.floristpro.migrate.DataDownload.main(Unknown Source) 2019-03-28 11:04:35 ERROR RemoteAccessDAO:? - Remote Access Error: CreateSession failed: null没有反应。第一次评估Cookies之后，Vue不再对其进行评估。

当您离开并返回时，Vue将再次评估计算出的属性，并且这次Cookie已被设置。

Answer 2

您的问题是因为您的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
  }
}

或者如果要避免在Cookie为空的情况下JSON错误，则可以添加一个简单条件：

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

根据附加的变量值，绑定类似乎无法正常工作

2 个答案: