如何最好地解决同一视图中组件之间的状态共享

Question

我有一个包含 3 个组件的项目视图，<project-item>、<project-list> 和 <project-view>。所有这些组件都需要了解所选项目。

• <project-item> 保存特定项目的状态。此组件有一个名为 selected 的 属性，用于确定项目是否被选中。
• <project-list> 包含一个或多个项目项，并有一个计算的 属性 检查子项的类型 <project-item> 以及选择了哪些项目。
• <project-view> 是仅包含导航和逻辑关联 UAC 的一般视图。

层次结构如下所示...

<project-view>
    <project-list>
        <project-item selected></project-item>
    </project-list>
</project-view>

什么是共享状态的最佳方式，我觉得 vuex 在这里是错误的选择，因为它不是全局状态。

我也曾尝试在 <project-view> 组件上使用计算的 属性 来获取 <project-list> 组件上的选定项目，但它会抛出错误，尽管存在并在范围内。

Answer 1

Vuex 就是你的答案。 https://vuex.vuejs.org/en/intro.html

这是状态共享的解决方案。

您将创建商店，将您的状态与商店连接起来并使用 actions/mutations 与它们一起工作。

它将为状态共享奠定良好的基础，如果需要，您可以轻松扩展。

祝你好运！

Answer 2

如果您认为 Vuex 有点矫枉过正，请在此处查看我的回答 - 完全相同的主题