Как правильно использовать мои унаследованные данные из родительского компонента?

Question

Я новичок в VueJS, и я настраиваю довольно простой веб-сайт, где пользователь может изменять некоторые элементы с веб-сайта, например фоновое изображение веб-сайта.

Из административной частивеб-сайт, пользователь может загрузить изображение, которое будет использоваться в качестве одного из фона страницы.Значение хранится в Rails API, и, когда пользователь попадает на часть посетителя, VueJS вызывает настройки из Rails, а затем отображает их там, где я хочу.Я использую Vue-Router, поэтому я выполняю вызов настроек в моем App.vue и передаю полученные данные компоненту <router-view>.Я решил сделать так, чтобы загружать все данные только один раз, а не загружать их для каждого изменения страницы.

Вот как это выглядит:

App.vue

<template>
  <div id="app">
    <transition :name="transitionName">
      <router-view :settings="settings" :me="bio"></router-view>
    </transition>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      settings: null
    }
  },
  created () {
    this.$http.secured.get('/settings')
      .then(response => {
        this.settings = response.data
      })
      .catch(error => this.setError(error))
  }
}
</script>

front / Landing.vue

<template>
  <div id="landing" :style="{background: this.settings.landing_bg.url}">
  <p>{{ this.settings.landing_bg.url }}</p>
  <!-- Some other elements, not related -->
  </div>
</template>

<script>
export default {
  props: ['settings'],
  created () {
    console.log(this.settings)
  }
}
</script>

<style scoped>
</style>

У меня несколько проблем с этой конфигурацией:

• Перваяв том, что я получаю сообщение об ошибке, в котором говорится, что VueJS не может прочитать "landing_bg" со значением null

• Но у VueJS нет проблем с отображением пути изображения в <p> прямо под ним

• console.log(this.settings) возвращает null, когда я перезагружаю страницу, но правильно отображает настройки, если я перехожу на другую страницу и возвращаюсь назад.Однако фоновое изображение не установлено.

• Я пытался объявить с помощью datas(), какую структуру будет иметь this.settings, но VueJS говорит мне, что ему не нравится, как есть дваsettings заявлено.

Я полагаю, это проблема асинхронных нагрузок, но как мне с этим справиться?Стоит ли использовать VueX?

Заранее спасибо

Answer 1

Я пытался объявить с помощью datas (), какую структуру будет иметь этот .settings, но VueJS говорит мне, что ему не нравится, как объявлены две настройки.

Нет,заявить об этом на реквизит, как это

props: {
    'settings': {
        type: Object,
        default: () => ({
            landing_bg: {
               url: '' //here you can specify a default URL or leave it blank to just remove the error
            }
        })
    },
},

Answer 2

Прежде всего, this является избыточным в вашем :style, измените его на:

:style="{ background: settings.landing_bg.url }"

Кстати, если ваш landing_bg.url не выглядит следующим образом: url('bg_url') вы можете захотетьдля создания вычисляемого свойства:

computed: {
  bgURL() { return `background: url('${this.settings.landing_bg.url}')` }
}

Вам также может понадобиться добавить v-if в этот div, чтобы отобразить его только после загрузки settings.Эта ошибка выскакивает, потому что settings по-прежнему равен нулю при создании компонента.

<div id="landing" :style="bgURL" v-if="settings">