何时使用 vuex（在 Nuxt 中）？答案

【问题标题】：When to use vuex (in Nuxt)?何时使用 vuex（在 Nuxt 中）？
【发布时间】：2021-07-30 05:25:17
【问题描述】：

我即将创建一个 Vue.js 项目（例如在线提醒），它使用 RESTful API 实现。我知道 Vuex 是一种状态管理模式，但我不知道何时使用它，因为在我现在的想法中，每次我要实现一个调用服务的功能时，也会为此创建一个商店。例如：AuthenticationAuthentication Store 中要调用的服务。

我的模式/结构：

 - Service : Call api
 - Store : Call Service
 - Component : Store (Dispatch action)

第一个问题：我实现了登录功能，然后创建了一个服务登录方法。所以我的问题是我真的需要在商店中创建操作登录方法吗？

第二个问题：在什么特定的模块/功能中或何时使用商店 Vuex？

【问题讨论】：

我认为您的方法是正确的。我使用 Vuex 来保存我希望在应用程序生命周期内持久保存的数据，并可以从不同的页面/组件访问，例如你提到的身份验证系统。另一个例子可能是：您在每个页面中都有一个“最新消息”块，您可以在商店内的 nuxtServerInit 操作中获取该内容，然后将其保存为状态，然后您可以从每个页面获取它而无需请求该数据再次。
好的。以及一次调用 api/service 并且不使用状态或没有数据要保存的操作怎么样，是否仍然需要为此创建操作？
@SergioCerrutti vuex 不是为了持久化，这是 cookie/localStorage、API 或类似的工作。对于 OP：如果您不使用既不存储结果，调用会做什么？
嘿@kissu，你是对的，但我的意思是在应用程序中保持持久性，而不是会话。如果您不刷新页面或滥用路由器/nuxt 链接，存储的数据将保持不变。我认为这种方式的 Vuex 在很多情况下都很有用，不是吗？
@SergioCerrutti 如果您确实不硬刷新页面，则本地或全局状态仍位于浏览器中。但它与您在 JS 中创建的任何其他变量一样是易变的。持久性不是 IMO 在这里使用的术语，因为对我来说，这基本上意味着“我可以在刷新后仍然在这里”。

标签： vue.js nuxt.js vuex

【解决方案1】：

你需要了解 Vuex 解决了哪些问题：https://vuex.vuejs.org/#what-is-a-state-management-pattern

多个视图可能依赖于同一个状态。来自不同视图的操作可能需要改变相同的状态。对于问题一，对于深度嵌套的组件，传递 props 可能很乏味，并且对于兄弟组件根本不起作用。对于问题二，我们经常发现自己求助于解决方案，例如直接获取父/子实例引用或尝试通过事件改变和同步状态的多个副本。这两种模式都很脆弱，很快就会导致代码无法维护。

那么我们为什么不从组件中提取共享状态，并在全局单例中对其进行管理呢？这样，我们的组件树就变成了一个大“视图”，任何组件都可以访问状态或触发动作，无论它们在树中的什么位置！

Vuex 基本上可以帮助您在全球范围内传递数据，而无需整天依赖 props 和 emit。差不多就这些了。

如果你有一个购物车，你可以把它放在 Vuex 中，因为你可以在你的所有网站上到处乱扔一些东西。依靠本地状态来计算最终结帐会很麻烦。

如果您从一个 API 中为您的主页获取 10 张照片，那么在您的应用程序中的任何位置都可以访问它可能并没有真正的用处，因此将它传递给 Vuex 是多余的。在这种情况下，本地状态和一些 props/emit 可能就足够了。

所以，最后这一切都取决于你想如何组织你的代码，尽量不要太过分。

对于您的第二个问题，它是基于意见的，并且视情况而定。因此，最好的办法是让您尝试一下，看看效果如何。以后有问题可以改。

【讨论】：

如果它仅适用于一个组件或仅在一页中，因此无需创建/存放它？
@RainRain 它可能确实不需要。很难给出一个绝对的答案，因为您可能在某些时候有一些复杂的逻辑，但您总是可以从本地状态转移到 vuex，反之亦然。