从 Nuxt 中的另一个组件更新组件内容的最佳解决方案

Question

我是 Nuxt 和 Vue 的新手，所以我不确定对于这个用例来说，最好的解决方案是什么。

我想更改文本 （如“主页”、“设置”、“收藏夹”等）在我的Header.vue （始终固定在页面顶部） 来自另一个组件。例如Favourites.vue。

有时我想完全隐藏标题或隐藏标题和显示按钮， 所以我需要传递更多的道具，而不仅仅是标题。

我尝试使用不同的布局，但这会破坏动画过渡（我还没有找到解决方案），但我认为它仍然最好从页面控制我传递给这个组件的内容。

---

我应该将 props 从 Page.vue 传递给父级 并从 Header.vue 组件中读取它吗？

我应该使用 Vuex 将其传递到商店并在路由更改时更新它吗？ 还是对于这个用例来说太复杂了？

也许有一个我不知道的更简单的解决方案。

---

文件夹结构：

/components
├──Header.vue
└──Nav.vue

/pages
├──Index.vue
├──Profile.vue
├──Settings.vue
└──Favourites.vue

Answer 1

Vuex 是这里的答案——不用担心“简单”的用例。一旦您注意到您正在创建其他组件可能依赖的数据（此页面上的标题是否可见？文本是否不同？等），进入 Vuex 并保持单一事实来源是个好主意。

您的应用一开始可能看起来很简单，但它会不可避免地发展壮大，届时您会喜欢拥有单一事实来源而不是尝试通过 props 在组件之间传递信息。

Nuxt 还使 Vuex 的实现变得非常简单。毫无疑问，你有能力拉起docs！