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

【问题标题】：Vue.js recalculate computed properties on client after server renderingVue.js 在服务器渲染后重新计算客户端上的计算属性
【发布时间】：2018-07-11 13:55:56
【问题描述】：

我有这个简单的 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>

问题在于，通过服务器端渲染，我将 color 和 v-card 计算为一种样式，但是当客户端水合作用开始时，计算属性会重新计算，这会改变样式并导致重新渲染。

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

【问题讨论】：

标签： javascript vue.js nuxt.js

【解决方案1】：

在客户端水合期间始终重新评估计算的属性。在计算中传递副作用通常不是一个好主意（例如 Math.random()），因为 Vue.js 期望计算属性为 idempotent。所以通常你会在创建时计算一次随机值并将其存储为data。但是，组件的data 也不会在 SSR 和水合之间保留。

因此，您可以解决此问题的一种方法是将随机值存储在 Vuex 存储的状态中。然后就可以restore the state的存储形式在客户端的服务器中了。

【讨论】：