最近在项目中,遇到一个报错,QuotaExceededError: The quota has been exceeded。如图:
搜索了一下,结合项目代码,得到的结论是localStorage超出5M限制了,项目中使用了vuex-persistedstate插件,会把vuex中的数据存储在本地,当业务数据过多,就会超出限制,虽然vuex-persistedstate支持配置localforage,即把数据存在indexDB,但是官网上有这么一句:
因为localforage是异步操作,而vuex是同步操作,所以会有问题。
所以我改成了使用vuex-persist插件,它也支持配置localforage,但因为也会存在异步问题,好在官方提供了解决方案,只需要在路由守卫里加上以下代码就能完美解决:
import store from '/store'
router.beforeEach(async (to, from, next) => {await store.restorednext()
})
但因为本次升级会影响到项目全局功能,范围较广,我可不敢这么干,所以换了个解决方案,不走vuex,直接使用localforage,把在内存大的数据直接存在localforage,这样影响范围只有当前模块,同时也能完美解决问题。
附上vuex-persist地址:vuex-perisist官网