Javascript Vue.js在服务器渲染后重新计算客户端上的计算属性

我有一个简单的vue单文件组件

<template>
  <v-layout>
    <v-flex xs12 sm6 offset-sm3>
        <v-card v-bind:color="color" class="white--text">
          <v-card-title primary-title>
            <div>
              <h3 class="headline mb-0">Kangaroo Valley Safari</h3>
              <div>{{card_text}}</div>
            </div>
          </v-card-title>
        </v-card>
    </v-flex>
  </v-layout>
</template>

<script>
import MessageCard from '../components/MessageCard.vue';
const colors = [
  'red',
  'pink',
  'purple',
  'indigo',
  'green'
];

export default {
  data () {
    return {
      card_text: 'Lorem ipsum dolor sit amet, brute iriure accusata ne mea. Eos suavitate referrentur ad, te duo agam libris qualisque, utroque quaestio accommodare no qui.'
    }
  },
  computed: {
    color: function () {
      const length = colors.length;
      return colors[Math.round(-0.5 + Math.random() * (length + 1))] + ' darken-3';
    }
  },
  components: {
    MessageCard
  }
}
</script>

袋鼠谷野生动物园
{{card_text}}
从“../components/MessageCard.vue”导入MessageCard；
常量颜色=[
“红色”，
“粉红”，
“紫色”，
“靛蓝”，
“绿色”
];
导出默认值{
数据（）{
返回{
卡片文字：“Lorem ipsum dolor sit amet，粗暴的虹膜累积。Eos suavitate referrentur广告，te duo agam libris qualisque，utroque quaestio Accomodar no qui。”
}
},
计算：{
颜色：函数（）{
常量长度=colors.length；
返回颜色[Math.round（-0.5+Math.random（）*（长度+1））]+'darken-3'；
}
},
组成部分：{
信息卡
}
}

问题是，通过服务器端渲染，我得到了

v-card

的

color

作为一种样式，但当客户端启动计算属性时，会重新计算，从而更改样式并导致重新渲染

---

当然，我可以修复它的fix标签，但我很好奇是否有其他方法可以使它正常工作。

在客户端测试期间，计算属性总是被重新评估。通常情况下，在计算中传递副作用（如

Math.random（）

）不是一个好主意，因为Vue.js希望计算的属性是可用的。 因此，通常您会在创建时计算一次该随机值，并将其存储为

数据。但是，在SSR和水合作用之间，也不会保留成分的
数据

解决这个问题的一种方法是将随机值存储在Vuex存储的状态中。然后，就可以在客户机中从服务器获取存储的数据