首页
学习
活动
专区
工具
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 就提供了开箱即用的缓存机制)。

2K10
  • 写在 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

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

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

    17.8K53

    写在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

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

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

    69810

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

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

    2.2K20

    Apollo,真香!

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

    35810

    为 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 中会包含一个随机数,这个随机数也会由定时任务推送给下单服务器,下单服务器收到用户请求的时候,检查请求中包含的随机数是否正确,即检查该请求是否是伪造的。...全局计数器会根据秒杀商品库存数量,确定允许创单的请求个数,超过这个数目的请求也将重定向到秒杀结束页面。最终只有有限的几个用户能够秒杀成功,进入订单处理子系统,完成交易。

    28710

    “别更新了,学不动了” 之:全栈开发者 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配置中心服务端获取到应用的最新配置后,会保存在内存中 客户端会把从服务端获取到的配置在本地文件系统缓存一份 在遇到服务不可用,或网络不通的时候,依然能从本地恢复配置 应用程序可以从

    13.1K20

    如何设计一个分布式配置中心?

    我:设计客户端和服务端,客户端集成到业务项目中,项目启动时从服务端pull配置加载到本地,并且定时check服务端和本地配置是否一致,服务端如有更新,再pull到本地 面试官:那如果有几万台服务器,都是这样定时去...://localhost:8080 # Apollo本地缓存路径 apollo.cache-dir=/Users/longbig/log # 指定Apollo配置文件的环境 env=DEV # 配置访问秘钥...不会立即返回结果,而是通过Spring DeferredResult把请求挂起 如果在60秒内没有该客户端关心的配置发布,那么会返回Http状态码304给客户端 如果有该客户端关心的配置发布,NotificationControllerV2...客户端从返回的结果中获取到配置变化的namespace后,会立即请求Config Service获取该namespace的最新配置。 7....客户端从Apollo配置中心服务端获取到应用的最新配置后,会保存在内存中 客户端会把从服务端获取到的配置在本地文件系统缓存一份 在遇到服务不可用,或网络不通的时候,依然能从本地恢复配置 应用程序可以从Apollo

    8300

    Apollo配置中心使用篇

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

    9.2K61

    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.2K110

    手把手教你运行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.4K20

    告别Eureka!Nacos也落伍了!这款配置中心才是新宠!

    每个应用都需要有唯一的身份标识,可以在代码中配置 app.id 参数来标识当前应用,Apollo 会根据此指来辨别当前应用。...本地缓存路径默认位于以下路径,所以请确保/opt/data或C:\opt\data\目录存在,且应用有读写权限。...客户端从 Apollo 配置中心服务端获取到应用的最新配置后,会保存在内存中。 客户端会把从服务端获取到的配置在本地文件系统缓存一份 在遇到服务不可用,或网络不通的时候,依然能从本地恢复配置。...长连接实际上我们是通过 Http Long Polling 实现的,具体而言: 客户端发起一个 Http 请求到服务端 服务端会保持住这个连接 60 秒 如果在 60 秒内有客户端关心的配置变化,被保持住的客户端请求会立即返回...,并告知客户端有配置变化的 namespace 信息,客户端会据此拉取对应 namespace 的最新配置 如果在 60 秒内没有客户端关心的配置变化,那么会返回 Http 状态码 304 给客户端 客户端在收到服务端请求后会立即重新发起连接

    13610

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

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

    1K20
    领券