Mixin 中的 VueX答案

【问题标题】：VueX within MixinMixin 中的 VueX
【发布时间】：2020-02-07 19:05:14
【问题描述】：

在写太多代码之前，我想我应该从概念上理解我所做的是否正确。

我有一些组件，它们导入了一个 mixin。 mixin 有一个 web api 调用来从 (HATEOAS) API 中检索一些链接，因此 UI 可以使用这些链接而无需形成自己的链接。这些看起来像：

[
        {
            "Rel": "GetSupportingData",
            "Href": "https://api.com/SupportingData"
        },
        {
            "Rel": "Search",
            "Href": "https://api.com/Search"
        }
]

所以 MIXIN 有一个名为 GetLink("Search") 的方法，它可以从 API 中检索链接并返回请求的链接。

这没关系，但是由于 mixin 被导入到很多组件中，我不希望每次都使用它来进行 WEB API 调用以在过滤它们之前获取链接。因此，我想知道是否应该使用 Vuex 来管理链接的状态并在商店计数为零时检索它们？

我看到的Vuex的例子是在组件上实例化的，所以我做的感觉可能不正确。

【问题讨论】：

标签： vue.js vuex mixins

【解决方案1】：

您可以将 web api 链接存储到 store 中，这是一种方法，但是当您再次刷新页面时，store 需要填充 api 链接

所以，另一种方法是使用浏览器的localStorage或indexedDB

每当您首次加载应用程序时，它都会转到 localstorage 或 indexedDB 并检查 api 链接。如果它存在，它将恢复到 Vues 存储。或者调用 mixin 方法获取 api 链接并加载到浏览器存储和 vuex 存储

【讨论】：