vuex疲劳

如果您平常使用nuxt.js或vue.js，那么您可能知道，当传递复杂的数据结构给vuex时，可能会导致状态(state)未更新。

因此，我一度在pages的vue文件中使用了一种没有vuex的方法，以此作为实现的基础，但这段源代码已经很久没有更新了。

然而，对于这样的实施方法，最糟糕的是维护性，这是当然有意识到的。

虽然我开始觉得需要想办法解决，但最终还是不得不使用vuex，我决定自己开发一个替代vuex的插件。

创建了一个名为Resolved API的插件的故事

解决API（以下简称rapi）
自制插件这个说法有些夸张，
只是简单地使用了大量的ES6并进行了包分割而已。

将API传递给上下文的主要index.js和解析器
解析器只包含查询、变更、客户端.js和缓存.js。
例如，vuex和Apollo的缓存都是基于相对复杂的架构构建的，
但实际上，您可以使用自定义插件创建一个非常简单的架构。

Rapi是为了极简、轻薄、高度可定制而设计的。通过编辑client.js，可以同时支持GraphQL和REST API。

缓存的读写默认使用名为jorm的gorm类似的缓存ORM来执行，但是关于缓存，也可以选择使用lowdb等其他API来替代。

关于开发名为jorm的缓存ORM的故事

Rapi的设计概念是完全嵌入在前端，因此参考的架构是由gqlgen生成的GraphQL服务器架构。

如果这样的话，为了在数据库中进行读写，我们也需要一个叫做cache ORM的工具。
正因为如此，我们参考了gorm的代码，并创建了一个名为jorm的cache ORM工具。

GraphQL和REST API都能适应。

正如前文所述，通过修改client.js，rapi可以同时支持GraphQL和REST API。（ES6真是伟大。）由于gqlkit是用于开发GraphQL应用程序的框架，因此gqlkit的rapi默认支持GraphQL。

因此，作为REST API的具体实现示例，我还将介绍使用resas API的人口动态图表示例。
（请注册帐户并获取resas API的身份验证令牌。）
https://github.com/inadati/total-population-trends-sample

整合

我开始使用名为Rapi的插件后，
前端实现变得非常容易。
组件端的源代码没有受到任何污染。
这是理所当然的。
“Resolved API”是指

• サーバーからのデータの取得、書き込み

• キャッシュへのデータの書き込み、取得

• コンポーネント(クライアント)サイドに必要な形式へのデータの組み替え

GraphQLの場合クエリの管理

这样，我们可以将一个能够将各种问题“标记为已解决”的API提供给组件。对于组件来说，它几乎不需要做太多额外的工作。

顺带说一句，虽然我说了nuxt.js的插件，
但只要是可以将数据存储插入到上下文(context)中的框架，
应该都可以使用。
可能在svelte中也可以实现吧，
不确定react能否实现。
因为react的组件与数据很紧密，我不太清楚。
我没有深入地接触过react，所以不太清楚。