服務器渲染后，Vue.js在客戶端上重新計算計算的屬性

Question

我有這個簡單的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>

問題在於，通過服務器端渲染，我正在獲取v-card color作為樣式，但是當客戶端水合作用開始時，計算屬性將重新計算，這會更改樣式並導致重新渲染。

當然，我可以修復fix標簽，但是我很好奇是否還有其他方法可以使其正常工作。

Answer 1

在客戶端水合作用期間，始終會重新評估計算的屬性。 由於Vue.js期望計算的屬性是冪等的 ，因此通常不希望在計算的過程中傳遞副作用（例如Math.random() ）。 因此，通常您會在創建時計算一次該隨機值，並將其存儲為data 。 但是，在SSR和水合之間也不會保留組分的data 。

因此，您可以通過在Vuex存儲狀態下存儲隨機值來解決此問題。 然后可以從客戶端中的服務器還原存儲的狀態 。