Vue.js 2.0, проходящий через Auth :: user() дочерние компоненты в сложной иерархии

Question

У меня эта сложная структура. Представьте себе StackOverflow как сайт для Q & A:

app.js    //new Vue object <- receives Auth::user() object by AJAX 

- Question.vue  //main component 
-- AnswerList.vue // a question has an answer-list 
--- Answer.vue  // an answer-list has multiple answers 
---- CommentList.vue // an answer has a comment-list 
----- Comment.vue // a comment-list has multiple comments 

Я хочу передать аутентификацию пользователя к компонентам Question, Answer и Comment. Но НЕ до AnswerList и CommentList.

Есть ли способ передать Auth::user только к этим компонентам или мне действительно нужно добавить authuser объект как props ко всем компонентам в иерархии?

Answer 1

Если Auth::user() хранится в корневом экземпляре как authUser, самым простым способом доступа к нему в дочерних компонентах будет использование this.$root.authUser.

Таким образом, вы эффективно используете корневой экземпляр в качестве хранилища.

Надеюсь, это поможет!

Answer 2

Несмотря на то, что ответ принят, и OP нашел удовлетворительное решение, я думаю, что важно предложить использовать Vuex. Это централизованное хранилище данных, которое хранит данные, которые могут быть разделены между компонентами. Также позволяет изменять данные в хранилище vuex со всех компонентов структурированным и отлаживаемым способом, что невозможно с принятым решением.

Я понимаю, что это может быть излишним для потребностей ОП, но я по-прежнему верю, что это лучшее решение.