Javascript 获取缓存数据Vue CLI Vuex PWA

如何在脱机模式下将缓存数据从service worker中获取到vuex存储？

该应用程序在浏览器中以脱机模式工作，但当我将站点添加到主屏幕并包含manifest.json文件时，它不会显示缓存的数据，只显示一般的js、css和html

我很难弄清楚，我是如何从我的PWA中获取缓存数据的。我已经缓存了数据。问题是将其检索回名为“games”的vuex商店状态，以便在应用程序脱机时显示

用于缓存服务工作者的api调用的vue.config.js代码

module.exports={
pwa：{
workboxPluginMode:“GenerateSW”，
workboxOptions：{
导航返回：“/index.html”，
运行时缓存：[{
urlPattern:newregexp（'API_URL'），
处理程序：“networkFirst”，
选项：{
网络超时秒数：20，
cacheName:“api缓存”，
可缓存响应：{
状态：[0，200]，
},
},
}]
}
}
};你用错误的方式思考这个问题。您不需要服务人员为您做任何事情。它已经为您提供了一个缓存实现。相反，您需要使用
navigator.onLine
hook来确定他们是否可以访问internet。如果没有，则从缓存中添加存储，并确保订阅任何突变并将状态推回到缓存中，如下所示：

if (!navigator.onLine) {
    const state = hydrateFromCache()

    store.subscribe((mutation, state) => cache.setItems(state)
}

其中，
hydrateFromCache
方法只是将存储从缓存中拉入，并对所有vuex模块的状态进行水合物化。
您的想法是错误的。您不需要服务人员为您做任何事情。它已经为您提供了一个缓存实现。相反，您需要使用
navigator.onLine
hook来确定他们是否可以访问internet。如果没有，则从缓存中添加存储，并确保订阅任何突变并将状态推回到缓存中，如下所示：

if (!navigator.onLine) {
    const state = hydrateFromCache()

    store.subscribe((mutation, state) => cache.setItems(state)
}

其中，
hydrateFromCache
方法只是将存储从缓存中拉入，并对所有vuex模块的状态进行水合物化