如何用 apollo 客户端状态管理替换 vuex？

Posted 2023-03-08

【中文标题】如何用 apollo 客户端状态管理替换 vuex？

【英文标题】：how can i replace vuex with apollo client state managment?

【发布时间】：2020-08-23 02:49:00

【问题描述】：

我是 apollo-client 的新手，我想替换 vuex 进行状态管理，请记住，有没有什么方法可以像 vuex 那样集中放置我的突变和查询？我发现的大多数教程和文档都在每个组件中调用查询和突变，这可能会导致查询和突变的重复，那么我该如何解决这个问题？

【参考方案1】：

所以，我没有大量的 Vuex 经验，但我有一个使用 Vue Apollo 的生产应用程序，这确实是一种不同的心态。

Apollo 不是本地存储数据，它是一种访问远程数据的结构化方式。比起 Vuex，它更像是 Axios 的替代品。

对于 Apollo，重复查询并不是一件坏事，因为 Apollo 有一个非常聪明的缓存策略。您可以使用fetchPolicy: 'cache-first' 调用查询来指示 Apollo 不要重新获取已获取的数据。

（现在，如果数据经常更改 - 例如在聊天应用程序中 - 您可能不只想依赖缓存的数据。这是您对查询做出的决定-查询依据。）

也就是说，我不会使用 Apollo 来存储本地数据，这些数据旨在从一个页面传送到另一个页面（例如电子商务购物车）。为此，我会坚持使用 Vuex。

【讨论】：

Apollo 可用作本地数据存储：apollo.vuejs.org/guide/local-state.html

哦，嘿！没有意识到。不错????

【参考方案2】：

您应该使用相应的query 或mutation 创建.js 或.ts 文件。那么，如果你不想将state存储在Apollo客户端状态管理系统中，可以调用Vue.js中相应的状态管理服务。我正在使用 React.js，所以我会使用 Context API，我相信您可以为 Vue.js 找到相同的东西。

查看有关如何实现类似于 React.js 的 Context API 的链接：

Context API for Vue.js/Nuxt.js applications React context-like feature

【讨论】：

我不认为 vue 有类似 context api 的东西，虽然我对 React 不太熟悉

我将所有查询和突变存储在一个 .js 文件中，我可以使用 apolloClient.query(query:...) 或使用 vue apollo 从我的组件中调用它们，但我的问题仍然是如何我可以把我的状态和突变集中起来，这样我就可以防止我的每个组件重复查询和突变代码

很抱歉，我无法为您提供更多帮助。 Graphql 与 React 是趋势，简单，简单和很棒的组合。希望有一天你尝试 React