Как передать параметры от page в layout nuxt js?

Question

[betterthanyouthink]

layouts/default.vue

<template>
  <div class="page__container">
    <app-header/>
    <main class="page__content">
      <Nuxt/>
    </main>
    <app-footer />
  </div>
</template>

В header этого layout'a мне необходимо передавать title и subtitle, т.к. они меняются в зависимости от страницы. Я реализовал это следующим образом:

layouts/default.vue:

<template>
  <div class="page__container">
    <app-header :header-data="headerData"/>
    <main class="page__content">
      <Nuxt/>
    </main>
    <app-footer />
  </div>
</template>
<script>
  export default {
    name: 'default-layout',

    components: {AppHeader, AppFooter},

    computed: {
      headerData() {
        return this.$route.matched.map(r => {
          return r.components.default.options.headerData
        })[0]
      }
    }
  }
</script>

pages/index.vue и аналогичные страницы:

export default {
    headerData: {
      title: "Заголовок страницы",
      subtitle: "Подзаголовок страницы"
    }
  }

app-header.vue:

<template>
  <header>
    <h1>{{headerData.title}}</h1>
    <span>{{headerData.subtitle}}</span>
  </header>
</template>

<script>
export default {
    name: "app-header",

    props: {
      headerData: {
        type: Object,
        required: true
      }
    },
}
</script>

Насколько правильно такое решение? Можно ли сделать это более лаконично?

Answer 1

[vogordin]

На случай, если кто-то наткнётся на этот старый вопрос:
Если нужно передавать что-то из page в какой-то другой компонент в layout, то правильнее (на мой взгляд) в этом случае использовать vuex и менять переменную в store при необходимости. Внутри layout нужно подтягивать эту переменную и передавать в props необходимого компонента.

Comments

[Аркадий Кожедуб]

У vuex в этом плане есть ряд минусов:

1. На каждой странице нужно будет указывать явно данные и нет возможности сделать значения по умолчанию.
   
2. При реализации какого-то глобального механизма во время роутинга сбрасывать значение на дефолт, vuex триггерит ререндер страницы и новые данные появляются на ПРОШЛОЙ странице (т.к. пока не загрузится новая страница, будет отображаться старая, но уже с новыми данными).
   

Решение автора работает в моем случае идеально, но тем не менее выглядит очень костыльно.

Есть ли у вас реализация на vuex, которая поддерживает значение по умолчанию для каждой отдельной страницы и при этом новое значение вступает в силу ПОСЛЕ полной загрузки страницы? Хотелось бы взглянуть на рабочую реализацию.