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

页面重载导致Vuex getter返回undefined

是因为在页面刷新时,Vuex的状态会被重置,而getter是基于状态的计算属性,因此在页面重载后,getter可能无法获取到正确的值,从而返回undefined。

为了解决这个问题,可以采取以下几种方法:

  1. 检查页面是否正确引入了Vuex:确保在页面中正确引入了Vuex,并且在Vue实例中注入了Vuex的store。
  2. 检查getter的使用方式:确保在组件中正确使用了getter。在组件中使用getter时,应该使用计算属性的方式来获取getter的值,而不是直接调用getter函数。
  3. 检查getter对应的状态是否存在:在getter中使用的状态必须在Vuex的store中存在,否则getter无法正确计算。可以通过在getter中使用if语句或默认值来处理状态不存在的情况。
  4. 检查页面重载时是否正确初始化了状态:在页面重载时,可以通过在Vue的created钩子函数中重新初始化状态,以确保getter能够正确计算。
  5. 使用持久化方案:可以考虑使用Vuex的插件或第三方库来实现状态的持久化,以避免页面重载导致状态丢失的问题。例如,可以使用vuex-persistedstate插件将状态保存到本地存储或cookie中。

总结: 页面重载导致Vuex getter返回undefined的问题可以通过检查Vuex的引入、getter的使用方式、状态的存在、状态的初始化以及使用持久化方案等方法来解决。在解决问题的过程中,可以根据具体情况选择合适的方法来处理。

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

相关·内容

  • Vuex入门(3)—— getters,mapGetters,…mapGetters详解

    (这里多说一句吧,vuex的出现是为了解决组件间的通信问题,如果你的操作或者数据不涉及到公共操作,只是单一组件操作,请务必不要把这些状态值或者function存储到vuex中,因为vuex会把自身挂载到所有组件上...系列中会讲到.) 1.getters Vuex 允许我们在 store 中定义“getter”(可以认为是 store 的计算属性)。...就像计算属性一样,getter返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。...return function(number){ // 如果有相同的则返回n,如果找不到则返回undefined let ifExit = state.arr.find(function...store.getters.findArr(7)) } } 最后在说一句,很多情况下你是用不到getters的,请按需使用,不要用getters去管理state的所有派生状态,如果有多个子组件或者说子页面要用到

    1.6K10

    前端知识点总结vue篇(下)

    Vue的优点与缺点 优点: 组件化、响应式、单页面路由(SPA)、轻量级、渐进式(随意component是否使用、vuex是否使用) 缺点: 不利于SEO、不支持IE8以下(因为defineproperty...Vue常用的修饰符 .prevent 提交事件不再重载页面 .stop 阻止单击事件冒泡 .self 当事件发生在该元素本身而不是子元素时会触发 .capture 事件侦听,事件发生时会调用 .once...(因为history模式改变URL方式会导致浏览器向服务器发送请求,因此要在服务器端 做处理,如果URL匹配不到任何静态资源,应该返回同一个index.html页面,这个页面就是app依赖的页面,在访问二级页面时...里面,此时vue已经将编译好的模板挂载在页面上,在mounted前访问dom会是undefined。...b.vuex有state,getter,mutation,action,module等5种属性。 c.state:存放数据,是响应式的,若是store中的数据发生改变,依赖这个数据的组件也会更新。

    34820

    前端面试题

    当函数的返回值期望是对象时,被用作返回值传出。 作为对象原型链的终点。 undefined表示”缺少值”,就是此处应该有一个值,但是还没有定义。...函数没有返回值时,默认返回undefined。 该如何检测它们? null:表示无值;undefined:表示一个未声明的变量,或已声明但没有赋值的变量,或一个并不存在的对象属性。...typeof返回的是字符串,有六种可能:”number”、”string”、”boolean”、”object”、”function”、”undefined”。...(虽然也有不少人推荐直接用VUEX,具体来说看需求咯。技术只是手段,目的达到才是王道。) Vuex是什么?怎么使用?哪种功能场景使用它?与cookie的区别?...答:.prevent: 提交事件不再重载页面;.stop: 阻止单击事件冒泡;.self: 当事件发生在该元素本身而不是子元素的时候会触发;.capture: 事件侦听,事件发生的时候会调用 7.v-on

    1.6K10

    面试中会被问及到的vue知识

    updated (更新后) 在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时,组件DOM已经更新,所以可以执行依赖于DOM的操作。...这解决了上述 Object.defineProperty() 第二个问题 支持数组:Proxy 不需要对数组的方法进行重载,省去了众多 hack,减少代码量等于减少了维护成本,而且标准的就是最好的。...页面,这个页面就是你 app 依赖的页面。...的getter和vue组件的computed, vuex的mutation是直接改变的原始数据,而redux的reducer是返回一个全新的state,所以redux结合immutable来优化性能,vue...Vuex有5种属性: 分别是 state、getter、mutation、action、module; state Vuex 使用单一状态树,即每个应用将仅仅包含一个store 实例,但单一状态树和模块化并不冲突

    2.4K30

    公司要求会使用框架vue,面试题会被问及哪些?

    updated (更新后) 在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时,组件DOM已经更新,所以可以执行依赖于DOM的操作。...这解决了上述 Object.defineProperty() 第二个问题 支持数组:Proxy 不需要对数组的方法进行重载,省去了众多 hack,减少代码量等于减少了维护成本,而且标准的就是最好的。...页面,这个页面就是你 app 依赖的页面。...的getter和vue组件的computed, vuex的mutation是直接改变的原始数据,而redux的reducer是返回一个全新的state,所以redux结合immutable来优化性能,vue...Vuex有5种属性: 分别是 state、getter、mutation、action、module; state Vuex 使用单一状态树,即每个应用将仅仅包含一个store 实例,但单一状态树和模块化并不冲突

    2.4K30

    【Vuejs】1146- 这些 Vue 的技巧你都掌握了吗?

    优点 良好的用户体验,内容更改无需重载页面。 基于上面一点,SPA相对服务端压力更小。 前后端职责分离,架构清晰。...常见业务场景:在列表页的第 2 页进入详情页,详情页返回,依然停留在第 2 页,不重新渲染。但从其他页面进入列表页,还是需要重新渲染。...* 代表通配符,若放在任意路由前,会被先匹配,导致跳转到 404 页面,所以需将如下配置置于最后。...特点 hash值存在 URL 中,携带#,hash值改变不会重载页面。 hash改变会触发onhashchange事件,可被浏览器记录,从而实现浏览器的前进后退。...所以在服务端需增加一个覆盖所有情况的候选资源:若URL匹配不到任何静态资源,则应该返回同一个`index.html`。这个页面就是app依赖的页面

    1.7K20

    Vue 面试题汇总

    创建前/后 在beforeCreated阶段,vue实例的挂载元素$el和数据对象data都为undefined,还未初始化。 在created阶段,vue实例的数据对象data有了,$el还没有。...,分别是 state、getter、mutation、action、module 2、vuex 的 store 特性是什么 (1) vuex 就是一个仓库,仓库里放了很多对象。...,就不需要放入 vuex 的 state 里 如果被其他地方复用,请将请求放入 action 里,方便复用,并包装成 promise 返回 5、不用 vuex 会带来什么问题 可维护性会下降,你要修改数据...…这样的话列表和详情都是一个频率很高的页面,那么就可以对列表组件使用进行缓存,这样用户每次返回列表的时候,都能从缓存中快速渲染,而不是重新渲染 11...客户端 entry 主要作用挂载到 DOM 上,服务端 entry 除了创建和返回实例,还进行路由匹配与数据预获取。

    3K30

    vuex

    问题2:兄弟组件传值 问题3:多处地方使用同一数据,为节省重复请求(最为常见) 直接上业务场景 ​ 从A页面携带下钻参数(ID)到B页面,然后B页面获取参数(ID)进行数据请求。...可以使用Vuex做中间过渡,跳转前存储ID信息,进入B页面后从Vuex获取ID信息。 ​...如果用户在B页面刷新数据,则Vuex的ID状态值会被清空无法获取,这里只能借助localStorage进行持久化进行处理(当然,如果直接使用localstorage进行持久化存储,而不借助Vuex也是可行的...以上的这些模式非常脆弱,通常会导致无法维护的代码。 ? Vuex简介 Vuex 和单纯的全局对象有以下两点不同: Vuex 的状态存储是响应式的。...类似于计算属性,getter返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。

    3K21

    使用vue技术栈,作为一个前端架构师是必须掌握这些知识点的

    Vuex 允许我们在 store 中定义“getter”(可以认为是 store 的计算属性)。...就像计算属性一样,getter返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。...** 通过方法访问 ** 你也可以通过让 getter 返回一个函数,来实现给 getter 传参。在你对 store 里的数组进行查询时非常有用。 getters: { // ......所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。...router.replace的区别: 使用push方法的跳转会向 history 栈添加一个新的记录,当我们点击浏览器的返回按钮时可以看到之前的页面

    4.3K52

    vuex学习笔记

    this.count++ } } }) 这个状态自管理应用包含以下几个部分: state,驱动应用的数据源; view,以声明方式将 state 映射到视图; actions,响应在 view 上的用户输入导致的状态变化...三、核心概念 1. state state:页面状态管理容器对象。集中存储Vue components中data对象的零散数据,以进行统一的状态管理。页面显示所需的数据从该对象中进行读取。...$store.state.count) 2. getters getters:Vuex 允许我们在 store 中定义“getter”(可以认为是 store 的计算属性)。...就像计算属性一样,getter返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。...getters就像计算属性一样,getter返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。)

    72120

    前端一面经典vue面试题(持续更新中)

    (具体参考用 JSON 深拷贝的缺点)如果 B 组件后退或者下一页跳转并不是前组件,那么 flag 判断会失效,导致从其他页面进入 A 组件页面时 A 组件会重新读取 Storage,会造成很奇怪的现象...返回 A 组件时再次携带 state 达到路由状态保持的效果。优点:简单快捷,不会污染 LocalStorage / SessionStorage。...组件不会被卸载:(1)单页面渲染要切换的组件作为子组件全屏渲染,父组件中正常储存页面状态。...优点:代码量少不需要考虑状态传递过程中的错误缺点:增加 A 组件维护成本需要传入额外的 prop 到 B 组件无法利用路由定位页面除此之外,在Vue中,还可以是用keep-alive来缓存页面,当组件在...PureComponent/shouldComponentUpdate)可能导致大量不必要的vDOM的重新渲染。

    91330
    领券