Выберите случайный элемент из массива в Nuxt.js только на сервере

Question

В настоящее время я использую следующее component.vue, однако, это заставляет его оценивать дважды (один раз при рендеринге на стороне сервера , один раз на клиенте ) и потому что это случайный пользовательвидит, как город мигает на секунду (и меняется на другой).

Какой самый эффективный способ предотвратить это?

export default {
        data(){
            return {
                cities: ["Rome", "Amsterdam", "Paris", "Berlin", "London", "Athens", "Madrid"],
                city: ''
            }
        },
        created(){
            this.city = cities[Math.floor(Math.random()*cities.length)];
        }
    }

Answer 1

В page.vue Я использовал asyncData для установки данных на стороне сервера во время рендеринга, например так:

export default {
    components: {
         'component'
    },
    data(){
         return {
             city: ''
         }
    },
    asyncData (context){
         let cities = ["Rome", "Amsterdam", "Paris", "Berlin", "London", "Athens", "Madrid"];
         const city = cities[Math.floor(Math.random()*cities.length)];
         return {
              city: city
         }
    }
}

Теперь, когда у нас есть переменная city со случайным городом, передайте его компоненту, используя опору или this.$parent.city в компоненте.