在 vuejs 中更改计算属性后如何从计算属性返回值

Question

我正在尝试基于 cookie 计时器在 vuejs 中的计算属性中返回修改后的变量值。

想法很简单，如果我没有cookie，然后设置原始值并设置另一个应该是缓存值（旧值）的变量并显示它。当 cookie 处于活动状态且未过期时，则显示之前的缓存值。

代码如下：

export default {
  name: 'app',
  components: {
    mainContr,
    glasses,
    watches
  },
  data: function() {
    return {
      glassKeys: ['blue', 'white', 'brown', 'yellow', 'black', 'small', 'big', 'medium'],
      watchKeys: ['mechanical', 'moonphase', 'bluehands'],
      glassItem: ''
    }
  },
  computed: {
    glasses: function() {
      var cachedItem,
          initialValue

      if (!this.$cookie.get('stringSuffixs')) {
        initialValue = this.glassKeys[Math.floor(Math.random()*this.glassKeys.length)]
        cachedItem = initialValue
        this.$cookie.set('stringSuffixs', 'Thirty seconds later', { expires: '2m' })
        return initialValue
      } else {
        return cachedItem
      }

    }
  }
}

我认为主要问题是变量没有被提升到直接父函数，在我的例子中是计算属性？

Answer 1

您的cachedItem 是一个局部变量，每次计算计算值时都会重新创建它。如果您想要更持久的cachedItem，您需要将其声明为data 项目并将其用作this.cachedItem。

你确定你不想要一个方法而不是一个计算？副作用（设置 cookie）和随机值并不真正属于计算。