什么时候应该使用组件数据而不是 vuex 状态？

Posted 2023-02-23

【中文标题】什么时候应该使用组件数据而不是 vuex 状态？

【英文标题】：When should I use component data instead of vuex state?

【发布时间】：2018-05-12 12:37:29

【问题描述】：

据我了解，vuex 状态使用的最佳示例是一个可供不同组件使用的购物车，或者 vuex 可以存储身份验证设置。

但是如果我有基于 vue-router 页面的 SPA 呢？我应该将页面数据存储在 vuex 状态还是 component.data 就足够了？

例如，我有以下页面的 SPA：

/users/
/user/:id
/user/edit/:id

对于 /user/:id 我有以下组件结构：

<UserDetailsPage>
    <Address :address="user.billingAddress"/>
    <UserGroupsList :user-groups="user.groups" />
</UserDetailsPage>

UserDetailsPage 从 API 检索数据并将用户数据对象存储在 data() 中。 Address 和 UserDetailsPage 之类的组件从 props 中接收它们需要的所有数据，并仅显示数据。

将用户存储在页面组件中是个好主意吗？

【问题讨论】：

Should I store all the data in vuex state的可能重复

【参考方案1】：

据我了解，当您需要在兄弟组件之间通信或传递数据时，或者如果一个组件中的数据更改（例如布尔值更改）触发另一个组件的更改，Vuex 状态管理就会发挥作用。

例如，如果您想存储用户的联系信息或产品信息，并在结帐过程中将其呈现在单独的组件上，Vuex 会很有帮助。但是，如果您只是为独立组件渲染数据，那么使用组件数据（与简单指令绑定或从 API 获取）就可以了。

通常当你真正需要使用状态时，它会变得很明显。

【讨论】：

我注意到当我开始将道具传递给子组件并发现自己需要根据子组件中发生的计算更新这些道具时，我需要 Vuex。没有 Vuex 是非常麻烦的。

【参考方案2】：

如果您需要将相同的数据呈现给多个组件，那么您应该使用 Vuex 存储。 Vuex 存储在初始设置级别增加了代码复杂性，但之后将 API 数据用于多个组件是如此简单和轻松。这并不意味着在每个应用程序中都使用 Vuex 存储。如果您正在开发本质上是渐进式的应用程序并且将来会变得更加复杂，那么请开始使用 Vuex 商店。