Как передать параметры в App.vue?

Question

[zilevsky]

Добрый день

Есть страницы view - FirstPage.vue, SecondPage.vue
Страница входа пользователей FirstPage.vue. Т.е. все данные получаю сразу.

Есть App.vue на которую подключены остальные страницы через <router-view/>

На странице FirstPage.vue я получаю параметры по API
Далее хочу передавать их на App.vue для выведения в шапке на остальных страницах типа FirstPage.vue, SecondPage.vue, ThirdPage.vue, etc.
Остальные страницы тоже работают с разными API и отображают свои данные.
Но есть общие днанные которые можно бы получать сразу с FirstPage.vue и не перезапрашивать их на каждой странице каждый раз.

Единственный общий компонент используемый на всех страницах это Sidebar.vue
Поэтому пробовал передавать через props, но возвращает ошибку

Ошибка

Uncaught TypeError: Cannot read properties of undefined (reading 'company_name')
    at Proxy.render (App.vue?91a0:8:1)
    at renderComponentRoot (runtime-core.esm-bundler.js?d2dd:896:1)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js?d2dd:5575:1)
    at ReactiveEffect.run (reactivity.esm-bundler.js?89dc:185:1)
    at instance.update (runtime-core.esm-bundler.js?d2dd:5689:1)
    at setupRenderEffect (runtime-core.esm-bundler.js?d2dd:5703:1)
    at mountComponent (runtime-core.esm-bundler.js?d2dd:5485:1)
    at processComponent (runtime-core.esm-bundler.js?d2dd:5443:1)
    at patch (runtime-core.esm-bundler.js?d2dd:5033:1)
    at render (runtime-core.esm-bundler.js?d2dd:6204:1)

На странице FirstPage.vue

export default {
  data() {
    return {
      req: {company_name: 'Рога и копыта'},
    }
  },

На странице
App.vue

<sidebar :req=req />
<div class="title">Название должно вылезти тут - {{req.company_name}}</div>

<script>
import Sidebar from "@/components/Sidebar";

export default {
  props: ["req"],
  components: {
    Sidebar
  },
}
</script>

Answer 1

[Альберт Ефремов]

В таких случаях данные полученные в одном месте но используемые в разных компонетах должны быть реактивные и хранить их можно в общем сторе, вытаскивая их в нужных компонентах и рендерить. А так как они реактивные, то в зависимости от их измененеия компонеты будут так же перерендериваться.

А вот как их уже хранить, тут много вариантов. Vuex, Pinia, можно через ref в хуке.

Ну и подумать как сохранить данные или получить их вновь если пользователь перегрузит станицу F5 например

Comments

[zilevsky]

Подскажите какой наиболее простой способ сохранить эти данные в виде словаря и передавать в другие компоненты.

[Альберт Ефремов]

Если есть уже привязанный стор (vuex, pinia) я бы в стор складывал после получения данных. Как пользоваться стором есть мануал.

Если стора нет, для vue 2 можно использовать Vue.observable( object ) https://ru.vuejs.org/v2/api/#Vue-observable

Если vue 3 то https://habr.com/ru/company/otus/blog/570138/ вот это стоит почитать.

Сделать хук типа useCompany внутри заюзать

import { reactive } from 'vue'

export const useCompany = () => {
    const company = reactive(null)

    return company
};

Ну и подрубать этот хук в нужных компонетах. А чтобы совсем на стор похоже было, в хук можно добавить методы добавления, удаления данных, можно сделать вычисляемые computed методы (геттеры) только нужно все это ретурнить чтобы было доступно.

В статье выше описано это.

[zilevsky]

Альберт Ефремов, спасибо, попробую.

[Альберт Ефремов]

Пожалуйста!

[Farkl]

Альберт Ефремов, а provide/inject?

[Альберт Ефремов]

Farkl, можно если данные получаем в app.vue и нужно помнить, что реактивность нужно прикрутить, ну например провайдить тот же реактивный const company = reactive(null)

Важно, чтобы app.vue был корневой, а остальные компоненты в которые провайдится, дочерними. При этом нужно понимать, что дочерние компоненты становятся зависимыми от компонента, который провайдит.