首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Vue/ apollo : apollo是否会关心缓存已经访问过的页面,还是必须将它们保存在我的商店中?

Vue/Apollo是一种用于构建现代化Web应用程序的开发工具。Vue是一个流行的JavaScript框架,用于构建用户界面,而Apollo是一个用于管理应用程序数据的GraphQL客户端。

在Vue/Apollo中,Apollo确实关心缓存已经访问过的页面。它使用了一种称为"缓存机制"的技术来存储和管理已经获取的数据。这意味着当你从服务器获取数据时,Apollo会自动将数据保存在缓存中,以便在以后的页面访问中可以直接使用,而无需再次向服务器发出请求。

这种缓存机制的优势在于它可以提高应用程序的性能和响应速度。当用户浏览不同页面时,如果某些数据已经在之前的页面中获取过,Apollo会直接从缓存中读取数据,而不是再次向服务器请求。这样可以减少网络请求的次数,节省带宽,并提供更快的用户体验。

然而,Apollo的缓存机制并不是万能的。有些情况下,你可能需要手动将数据保存在你的商店中。例如,当你需要在多个页面之间共享数据时,或者当你需要对数据进行复杂的操作和处理时,你可以将数据保存在Vuex(Vue的状态管理库)中,以便在整个应用程序中共享和使用。

总结起来,Apollo会关心缓存已经访问过的页面,并且会自动将数据保存在缓存中。但在某些情况下,你可能需要将数据保存在你的商店中,以便更好地管理和共享数据。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

一张图弄明白 Vuex 里该存放什么样数据

在对这个问题给出答案过程,很多人(包括)先是来到了“一股脑放进去”阶段。但是在遭遇了首次障碍后,你很快就会领悟到:这可不是在 Vue.js 应用管理数据完美方案啊。...在本文中尝试回答诸如“Vuex 在何种情景下是个称手解决方案”,以及“何时用其他方式更好些”这类问题。 I. 首先,为何使用 Vuex ?...集中式 API / 数据获取逻辑 我们还是搬出久经考验 To-Do 应用作为例子:你要从一个 API 请求得到包含所有 To-Do 项列表,又要按时间排序显示所有项目,也有页面是只显示其中特定分类...不把数据存入 Vuex 理由 如果你已经决定了使用 Vuex 管理应用状态,那么每次增加一个新组件,你就得做一次是否将它状态存入 Vuex 判断。...如果用户访问了之前打开过分类,我们既可以重新请求一次新鲜数据,也可以实现某种缓存Apollo 就提供了开箱即用缓存机制)。

1.9K10
  • (很全面)SpringBoot 集成 Apollo 配置中心

    客户端从 Apollo 配置中心服务端获取到应用最新配置后,存在内存。 客户端会把从服务端获取到配置在本地文件系统缓存一份 在遇到服务不可用,或网络不通时候,依然能从本地恢复配置。...长连接实际上我们是通过 Http Long Polling 实现,具体而言: 客户端发起一个 Http 请求到服务端 服务端保持住这个连接 60 秒 如果在 60 秒内有客户端关心配置变化,被保持住客户端请求立即返回...apollo.cacheDir=/opt/data/some-cache-dir: 为了防止配置中心无法连接等问题,Apollo 自动配置本地缓存一份。...application 配置文件默认值,还是远程 Apollo 值,如果是 Apollo 配置值,那么再测试在 Apollo 配置中心中改变该变量值后,这里是否产生变化。...考虑到由于 Apollo 会在本地配置缓存一份,出现上面原因,估计是缓存生效。当客户端不能连接到 Apollo 配置中心时候,默认使用本地缓存文件配置。

    16.9K53

    写在2021: 值得关注学习前端框架和工具库

    虽然这样也造成目前没有特别深入方向,比如21届大佬们在工程化、微前端、AST、NodeJS等等方向都已经开始深耕,还在追着各种新框架学当弟弟,但不得不说,在学习新事物过程,你逐渐对这些框架进行分类...SWR、React-Query、useRequest,网络请求状态管理、缓存、竞态处理等。 生态 GatsbyJS,基于React静态页面生成器,非常快。...Ionic,出现比较早一个跨端方案,最开始只支持Angular,现在还支持了React和Vue,暂时没有使用过。目前了解是性能与Vue支持上存在一些问题(所以Angular YES)。...强大地方在于实现了一套GraphQL缓存方案(GraphQL不像REST API那样可以用URL作为缓存key,它只有单个schema,要缓存必须基于Schema拍平整个数据结构,然后再基于各个field...工程化 打包/构建工具 Webpack5,新缓存方案和模块联邦还是值得了解下。 Vite,关于Vite文章太多了,感觉只要入门了前端就肯定听说过。

    2.9K10

    写在 2021: 值得关注学习前端框架和工具库

    虽然这样也造成目前没有特别深入方向,比如21届大佬们在工程化、微前端、AST、NodeJS等等方向都已经开始深耕,还在追着各种新框架学当弟弟,但不得不说,在学习新事物过程,你逐渐对这些框架进行分类...模板语法,在用Vue时候没有感觉到模板语法有多好,可能是因为模板和逻辑写在一个文件里总觉得不纯粹。但在Angular模板被单独放一个html文件,组件用Class语法写,就莫名觉得爽快。...Ionic[20],出现比较早一个跨端方案,最开始只支持Angular,现在还支持了React和Vue,暂时没有使用过。目前了解是性能与Vue支持上存在一些问题(所以Angular YES)。...强大地方在于实现了一套GraphQL缓存方案(GraphQL不像REST API那样可以用URL作为缓存key,它只有单个schema,要缓存必须基于Schema拍平整个数据结构,然后再基于各个field...工程化 打包/构建工具 Webpack5[55],新缓存方案和模块联邦还是值得了解下。 Vite[56],关于Vite文章太多了,感觉只要入门了前端就肯定听说过。

    4.2K10

    我们放弃了Nacos作为配置中心,转而选择了这款神器~

    客户端从 Apollo 配置中心服务端获取到应用最新配置后,存在内存。 客户端会把从服务端获取到配置在本地文件系统缓存一份 在遇到服务不可用,或网络不通时候,依然能从本地恢复配置。...长连接实际上我们是通过 Http Long Polling 实现,具体而言: 客户端发起一个 Http 请求到服务端 服务端保持住这个连接 60 秒 如果在 60 秒内有客户端关心配置变化,被保持住客户端请求立即返回...apollo.cacheDir=/opt/data/some-cache-dir: 为了防止配置中心无法连接等问题,Apollo 自动配置本地缓存一份。...application 配置文件默认值,还是远程 Apollo 值,如果是 Apollo 配置值,那么再测试在 Apollo 配置中心中改变该变量值后,这里是否产生变化。...考虑到由于 Apollo 会在本地配置缓存一份,出现上面原因,估计是缓存生效。当客户端不能连接到 Apollo 配置中心时候,默认使用本地缓存文件配置。

    55110

    Apollo,真香!

    客户端从 Apollo 配置中心服务端获取到应用最新配置后,存在内存。 客户端会把从服务端获取到配置在本地文件系统缓存一份 在遇到服务不可用,或网络不通时候,依然能从本地恢复配置。...长连接实际上我们是通过 Http Long Polling 实现,具体而言: 客户端发起一个 Http 请求到服务端 服务端保持住这个连接 60 秒 如果在 60 秒内有客户端关心配置变化,被保持住客户端请求立即返回...apollo.cacheDir=/opt/data/some-cache-dir: 为了防止配置中心无法连接等问题,Apollo 自动配置本地缓存一份。...application 配置文件默认值,还是远程 Apollo 值,如果是 Apollo 配置值,那么再测试在 Apollo 配置中心中改变该变量值后,这里是否产生变化。...考虑到由于 Apollo 会在本地配置缓存一份,出现上面原因,估计是缓存生效。当客户端不能连接到 Apollo 配置中心时候,默认使用本地缓存文件配置。

    33810

    GraphQL最突出架构优势是什么?

    在过去几年中,我们已经看到各种规模和形态公司都开始在整个组织逐渐采用 GraphQL,例如 Expedia、Nerdwallet 和 Airbnb。...如果我们采用依赖倒置方法,就可以定义一些端口来将它们安全地包含在我们应用程序。端口是抽象、合约。它们通常以 接口 或 抽象类 形式出现。...去年(2019 年),意识到 API 在技术栈深度已经超出了我们想象。API 触角伸到了前端框架数据存储,也伸到了后端服务合约层面。 这听起来可能有点虚幻,但它的确就是那样。...在 Apollo Server 端,这些 API 调用控制权转交给负责使用 ORM、原始 SQL、缓存、其他 RESTfulAPI 或任何你想到方法来获取数据解析器。...听上去一切都很完美,但是你我都生活在现实世界知道这样理想化情况并不总是存在,至少没有适当工具链是不可能做到

    2.2K20

    Vue 配置 GraphQL API

    serve 默认情况下,服务监听 localhost 8080 端口,浏览器访问 http://localhost:8080 就会看到 Vue 框架渲染网页。...注意第一步执行 vue create hello-world 时我们选择默认 Vue2, Vue3 是 2020 年 09 月 18 日发布在使用 Vue3 时后面生成样例代码那一步报错了,这里暂时用...同级目录下,打开命令窗口执行: vue add apollo 这个命令自动安装 npm 包:graphql graphql-tag @apollo/client。...除此之外让你选择是否生成代码,是否配置相关 API,如下图所示: ? 这里只选择生成样例代码即可,其他都选否。生成样例代码好处是我们不需要关心配置信息,集中精力放在业务逻辑即可。...到这里,我们已经实现了前端通过 GraphQL API 获取后端数据过程。 其实,Vue Apollo 还有很多功能,比如上传文件。

    1.2K20

    秒杀系统设计:你系统可以应对万人抢购盛况吗?

    而下单页面也是一个普通 URL,如果得到这个 URL,不用等到秒杀开始就可以下单了。秒杀系统 Apollo 必须避免这种情况。...如果该页面是动态生成,当然可以在服务器端构造响应页面输出,控制该按钮是灰色还是点亮。...但是在前面的设计,为了减轻服务器端负载压力,更好地利用 CDN、反向代理等性能优化手段,该页面被设计成了静态页面缓存在 CDN、秒杀商品服务器,甚至用户浏览器上。...下单 URL 中会包含一个随机数,这个随机数也会由定时任务推送给下单服务器,下单服务器收到用户请求时候,检查请求包含随机数是否正确,即检查该请求是否是伪造。...全局计数器根据秒杀商品库存数量,确定允许创单请求个数,超过这个数目的请求也重定向到秒杀结束页面。最终只有有限几个用户能够秒杀成功,进入订单处理子系统,完成交易。

    26710

    “别更新了,学不动了” 之:全栈开发者 2019 应该学些什么?

    开发者可以使用 Vue Native 进行跨平台开发(就像 React Native 那样),我们已经很接近 React 那样大型生态系统,但还是有一大段距离。...简单地说就是你可以构建可以被添加到不使用 Angular HTML 页面组件,有点像 Web 组件。...CLI 将会风靡 你必须使用 babel、webpack、eslint、测试库和其他工具搭建项目脚手架日子已经一去不复返了。...新 Context API、Redux 和 GraphQL Apollo 内置离线客户端缓存将使 Apollo + GraphQL 在 2019 年成为 Redux 一个重要替代品(当然,从技术上讲...计算机科学基本原理不怎么会发生变化,并且已经存在了很长时间,不会像开发库那样,一旦有新东西出来就变得过时了。

    2.6K30

    Apollo(阿波罗)配置中心Java客户端使用指南使用指南

    和idc同时指定: 我们会首先尝试从apollo.cluster指定集群加载配置 如果没找到任何配置,尝试从idc指定集群加载配置 如果还是没找到,从默认集群(default)加载 如果只指定了...如果没找到,从默认集群(default)加载 如果apollo.cluster和idc都没有指定: 我们从默认集群(default)加载配置 1.2.4.3 设置内存配置项是否保持和页面顺序一致...不过有些场景强依赖配置项顺序(如spring cloud zuul路由规则),针对这种情况,可以开启OrderedProperties特性来使得内存配置顺序和页面上看到一致。...另外,配置值从内存获取,所以不需要应用自己做缓存。 3.1.2 监听配置变化事件 监听配置变化事件只在应用真的关心配置变化,需要在配置变化时得到通知时使用,比如:数据库连接串变化后需要重建连接等。...客户端从Apollo配置中心服务端获取到应用最新配置后,存在内存 客户端会把从服务端获取到配置在本地文件系统缓存一份 在遇到服务不可用,或网络不通时候,依然能从本地恢复配置 应用程序可以从

    12.5K20

    Apollo配置中心使用篇

    不会立即返回结果,而是通过Spring DeferredResult把请求挂起 如果在60秒内没有该客户端关心配置发布,那么返回Http状态码304给客户端 如果有该客户端关心配置发布,NotificationControllerV2...客户端从Apollo配置中心服务端获取到应用最新配置后,存在内存 客户端会把从服务端获取到配置在本地文件系统缓存一份 在遇到服务不可用,或网络不通时候,依然能从本地恢复配置 应用程序可以从...在linux环境下启动,使用如下命令: java -jar test.jar -Denv=DEV 成功标识: apollo项目视图中,“实例列表”显示我们启动实例,已经正确配置信息获取到...全量发布效果是: 灰度版本配置会合并回主版本 主版本配置自动进行一次发布 在全量发布页面,可以选择是否保留当前灰度版本,默认为不保留。...server.port必须确保本地文件已经删除该配置项 ---- 限于篇幅,下面剩余部分大家自行阅读官方文档即可,写非常清楚,这边也就不再CV了 本地开发模式 本地开发模式 测试模式 测试模式

    8.5K61

    GraphQL+Koa2实现服务端API结合Apollo+Vue

    代码即是文档 GraphQL 会把 schema 定义和相关注释生成可视化文档,从而使得代码变更,直接就反映到最新文档上,避免 RESTful 手工维护可能造成代码、 文档不一致问题 参数类型强校验...GraphQLString Boolean:true或者false -- GraphQLBoolean **ID(GraphQLID)**:ID标量类型表示一个唯一标识符,通常用以重新获取对象或者作为缓存键...将它与vue-apollo和graphql一起安装: npm install vue-apollo graphql apollo-boost --save 在src/main.js引入apollo-boost...    data(){         return { msg: '是一个 home 组件' }      },     apollo: {         // 简单查询,更新 'hello'...'       }     },     apollo: {       // 简单查询,更新 'hello' 这个 vue 属性       navList: gql`{          navList

    5.2K42

    干货 | 携程开源配置中心Apollo设计与实现

    上图是Apollo配置中心中一个项目的配置首页 在页面左上方环境列表模块展示了所有的环境和集群,用户可以随时切换 页面中央展示了两个namespace(application和FX.apollo)配置信息...4、Apollo in depth 通过上面的介绍,相信大家已经Apollo有了一个初步了解,接下来我们深入了解一下Apollo核心概念和背后设计。...3、客户端从Apollo配置中心服务端获取到应用最新配置后,存在内存 4、客户端会把从服务端获取到配置在本地文件系统缓存一份 在遇到服务不可用,或网络不通时候,依然能从本地恢复配置 5、应用程序可以从...长连接实际上我们是通过Http Long Polling实现,具体而言: 客户端发起一个Http请求到服务端 服务端保持住这个连接30秒 如果在30秒内有客户端关心配置变化,被保持住客户端请求立即返回...,并告知客户端有配置变化namespace信息,客户端据此拉取对应namespace最新配置 如果在30秒内没有客户端关心配置变化,那么返回Http状态码304给客户端 客户端在服务端请求返回后会自动重连

    3.1K110

    手把手教你运行apollo

    3、Apollo open software Platform (开放软件平台) 这一层是百度Apollo 1.0开放核心部分,见下图(蓝色代表在apollo 1.0.0已经开放能力): 从图中看到...我们重点是Apollo open software Platform这一层,而这一层,我们不关心apollo kernel,只关心Apollo ROS和三个已经开放apollo modules。...对于爱折腾而言,必须要在本地做一次源码构建,即使这个体验是糟糕,甚至最终是失败^0^。...源码构建命令很简单,一行即可: 在这个过程遇到了两个错误: bazel不存在 Apollo构建依赖google出品bazel构建工具,个人对bazel并没有什么研究,这里先装上再说: third_party...docker运行起来后,我们在另外一个terminal windows下可以执行下面命令切入到该docker容器内部: 在dev container,我们可以来编译一下apollo源码: 由于dev环境相关依赖已经就绪

    3K60

    Apollo 源码解析 —— Config Service 配置读取接口

    在 《Apollo 官方文档 —— 其它语言客户端接入指南 —— 1.3 通过不带缓存Http接口从Apollo读取配置》 ,有该接口接口定义说明。...在 《Apollo 源码解析 —— Config Service 通知配置变化》 ,我们已经看到通知变更接口返回就包括 ApolloNotificationMessages 对象。...最终有两个子类,差异点在于是否使用缓存,通过 ServerConfig "config-service.cache.enabled" 配置,默认关闭。开启后能提高性能,但是增大内存消耗!...这一步是 DefaultConfigService 没有的操作,用于读取缓存时候,判断缓存是否过期,下文详细解析。...第 9 至 17 行:若客户端通知编号更大,说明缓存已经过期。

    2.3K20

    GraphQL项目中前端如何预生成Persisted Query

    但是不足地方就在于, 没有办法使用http cache, HTTP 缓存 - HTTP | MDN /虽然 HTTP 缓存不是必须,但重用缓存资源通常是必要。...已经有很多合适前/后端框架来使用, 这里说一个前端框架 GitHub - apollographql/apollo-link-persisted-queries: Persisted Query...也就是, 在前端部署过程或者是在访问页面之前就已经生成好. 为什么要预生成 当然, 还是要问为什么要这么做....简单来说, 还是为了更好优化, 试想一下, 如果已经可以一个大量访问schema变动提前缓存起来, 并且准备好这份数据, 当前端访问时候, 直接这份缓存数据扔给前端, 而不是再在后台重新查询拼接...如何去预生成 我们这里采用是, 在前端部署过程通过已有schema在node运行生成一段querystring, 通过hash后发给后端, 后端这段query持久化起来 具体做法是: 获取源头

    1K20

    消费者端微组件实现

    作者:吴鹏飞 & 黄凯特 部门:资产前端 一、背景 在消费者端,为了方便各条业务线接入,我们通常以组件方式提供功能,但是组件发布必须依赖于页面的发布,页面发布又通常需要业务方统一操作,比较影响组件迭代速度...使用异步组件流程: 使用打包工具组件源代码独立打包成 UMD 代码并上传到 CDN 修改组件配置,包含代码地址、版本、灰度比例以及降级版本等信息 页面请求 Node 时,Apollo-Dynamic-Components...插件根据配置,返回页面需要异步组件信息并放入全局变量内 页面加载时,从全局变量获取异步组件信息,并告诉Vue-Components-Injector要使用哪个异步组件以及异步组件变量名 Vue-Components-Injector...打包完成后,为了加快文件下载速度,通过脚本文件上传到 cdn 服务器,然后返回 cdn 地址同步到配置中心。这样我们就完成了组件打包层面的解耦,组件打包流程从项目打包独立出来。...整个流程分为 4 步: vue-components-injector 获取配置 生成script 标签并插入到页面,加载脚本 监听 js onload 事件,加载成功后调用回调函数 执行组件挂载 3.4

    92730

    Apollo配置中心,配置也可以“智能”

    实际上配置中心在市面上已经有很多,比如Nacos、Consul、spring-cloud-config、Apollo等等。...Config Service和Admin Service向Eureka注册服务。为了简单起见,目前Eureka在部署时和Config Service是在一个JVM进程。...然后Config Service有一个线程每秒扫描一次ReleaseMessage表,看看是否有新消息记录。...有些公司体量大一些自己公司开发一套配置中心,其实实现起来也不是特别难,上一间公司就自己实现,使用MQ消息队列+数据库,再自己简单地搭了一个增删改查、刷新配置web页面,就完成了一个配置中心。...但是觉得如果有现成开源更加舒服,不用自己造轮子耗费时间,精力,而且选一些像Apollo这种比较大众主流技术框架,学习成本也比较低,网上有很多资料。

    2.1K51
    领券