开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

我想计算Vuex的getters。但它返回的NaN

Vuex是一个用于管理Vue.js应用程序状态的状态管理模式。它包含了一些核心概念，如state（状态）、getters（获取器）、mutations（变更）和actions（动作）等。

在Vuex中，getters用于从state中派生出一些衍生数据，类似于Vue组件中的计算属性。getters可以接收state作为第一个参数，并且可以通过返回一个值来提供派生状态。

对于给定的问题，当Vuex的getters返回NaN时，可能有以下几种原因：

计算错误：可能是在getters中的计算过程中出现了错误，导致返回了NaN。这可能是由于错误的计算逻辑或数据类型不匹配等问题引起的。
数据未定义：如果在state中使用的数据未定义或为空，那么在计算过程中可能会导致NaN的返回。在这种情况下，需要确保state中使用的数据是正确定义和初始化的。

针对以上问题，可以采取以下步骤进行排查和解决：

检查getters的计算逻辑：仔细检查getters中的计算逻辑，确保没有错误的计算过程或数据类型不匹配的问题。可以使用console.log()或调试工具来输出中间结果，以便更好地理解计算过程中的问题。
检查state中的数据：确保state中使用的数据是正确定义和初始化的。如果数据是异步获取的，需要确保在计算getters之前已经获取到了正确的数据。

如果以上步骤都没有解决问题，可以考虑在Vuex的getters中添加一些错误处理机制，例如返回默认值或抛出异常，以便更好地调试和排查问题。

腾讯云相关产品和产品介绍链接地址：

腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
腾讯云云数据库MySQL版：https://cloud.tencent.com/product/cdb_mysql
腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
腾讯云人工智能：https://cloud.tencent.com/product/ai
腾讯云物联网套件：https://cloud.tencent.com/product/iot-suite
腾讯云移动开发：https://cloud.tencent.com/product/mobile-development
腾讯云区块链服务：https://cloud.tencent.com/product/tbaas
腾讯云元宇宙：https://cloud.tencent.com/product/tencent-meta-universe

相关搜索:我想获取父属性，但它返回未定义的jquery 返回NaN结果的时间计算我想获取所需的文档，但它似乎返回了集合中的每个文档我想让MongoEngine查询只返回我想要的车辆，但它不起作用 pandas数据帧之间的计算返回NaN 计算后以NaN形式返回的数字我想计算R中smooth.spline拟合函数的cv误差，但它显示的误差如下：我想计算总的ng-repeat 我的方法总是返回false，但它是有效的为什么我的pytorch NN返回nan的张量？数组的平均计算器(null参数返回NaN)我想返回带有timestramp和count的对象我想获取我的下拉列表数据，我写了一个代码，但它不工作 Javascript我想每秒删除列表中的元素，但它不会删除它我想计算特定月份的pandas列的平均值我应该返回ob "this“的地址，但它返回的是i，有什么解释吗？我想添加另一行，但它具有相同的变量，但参数不同如果与NaN的比较总是返回false,我如何比较浮点数到NaN？计划，球拍的帮助。如果满足条件，我想返回number 当输出结果为"NaN“时，我该如何修复我的计算代码？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

（四）Vuex 中的计算属性getters

Vuex 中的计算属性 getters 说明可以把 veux 中的 getters 当成计算属性，他定义在全局状态管理中，一来可以复用逻辑代码，二来可以减少组件的代码量一、定义 getters...$store.getters.getters中的名字来获取 user: <span...getters: { usersOlderThan(state) { // 通过返回一个方法去让用户自己也条件 // 这种情况不会缓存结果 return (age) =>...-- 因为 usersOlderThan 返回的是一个函数，所以可以直接调用传参--> user: {{ user

1K2 0

vue 计算属性与vuex getters的传参

计算属性比method好的一点是计算属性依赖数据是否变化而执行，不是每一次都执行，效率比较高，为了复用代码可以给计算属性进行传参使用计算属性返回一个函数来实现 <el-button v-if="getpermBTN...$store.<em>getters</em>.getBtnsLength(btn) } } }, state: { perbtns:["update","...add","delete"], }, getters:{ getBtnsLength:state=> btn=>{ console.log("getter")...return state.perbtns.indexOf(btn)>-1 } }, 以上代码是实现按钮权限，假如当前用户有几个按钮权限，在页面中那些按钮可以显示，用计算属性来实现，但是发现一个问题...，在页面上输入文本框或点击任何按钮，vuex 里面的getter里面的代码都会执行。

7592 0

从零开始学VUE之VueX(modules)

; }, // 获取平方的2分之一 getCountTwoOne(state, getters) { return getters.getCountPF / 2;...},1000) }) } }, // 用于划分不同模块的状态的里面可以写 state getters.......方法调用方法名不要冲突 getters:{ // state:自己的 getters:自己的 rootState:外面的state getComputed...()调用 actions:{ // context:上下文对象只能调用自己的mutations方法 // 如果想获取外面的可以使用 context.rootGetters...},1000) }) } }, // 用于划分不同模块的状态的里面可以写 state getters...

3642 0

分享一篇关于Vuex的入门指南（TypeScript版）

它提供了一种统一的方法来管理和更新状态，确保变化的一致性和可追溯性。 Vuex的创建受到了其他生态系统中的状态管理模式和实践的影响，比如React社区的Flux，但它专门为了与Vue无缝集成而构建。...你会注意到，点击按钮后，1秒钟后状态中的 count 会更新。 Vuex Getters Vuex的getters允许我们从原始状态计算出派生状态。...$store.commit("increment"); }, }, }); 这添加了额外的计算方法，返回getter函数。...由于文章内容篇幅有限，今天的内容就分享到这里，文章结尾，我想提醒您，文章的创作不易，如果您喜欢我的分享，请别忘了点赞和转发，让更多有需要的人看到。...同时，如果您想获取更多前端技术的知识，欢迎关注我，您的支持将是我分享最大的动力。我会持续输出更多内容，敬请期待。

2502 0

vuex知识笔记，及与localStorage和sessionStorage的区别

我的理解就是Vuex就是类似于sessionStorage这样管理数据(本地存和取)的一种技术方案。　　...由于Vuex的状态存储是即时响应的，从store实例中读取状态最简单的方法就是在Vue组件中”计算属性“computed中返回某个状态。...Vuex允许我们在store中定义”getter"（可以认为是store对象的计算属性）。就像计算属性一样，getter的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。...// 就像计算属性一样，getter的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。...mapState、getters、mapGetters都是对store对象中的状态(state)进行应用，如果想更改Vuex的store对象中的状态(state)，必须要用mutation。

2.6K2 0

Vue学习-Vuex

Getters getters是Store对对象中的五个属性之一。基本使用 getters的一个用法类似于组件中的computed计算属性。...例如，要多次获取state属性中的counter值乘100，不必在每次调用时都去计算，而是在getters中定义一个计算属性： index.js: import Vue from 'vue' import...--获取store中getters属性的mul计算属性--> export default { name: 'App', methods...--获取store中getters属性的studentsNumber信息--> 如果学生过滤的条件想让前端用户输入而不是在index.js中写死，那么getters...中定义的计算属性可以返回函数： index.js： import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store =

2K1 0

vuex使用记录

附上官方文档的链接，想更进一步了解vuex的朋友可以看看：https://vuex.vuejs.org/ 有些文章里面会把 vuex称作 store，这是因为 vuex里最常用的就是 Store类，绑定到...一、相关概念按照官方文档的说法，vuex有5个核心概念，分别是 state、getters、mutations、actions和 modules。...state相当于只读变量，组件可以访问 state变量的值，但是不能直接对其进行修改。注意我这里说的是不能直接进行修改，不是不能修改。想要修改 state里变量的值必须要通过 mutations。...getters就是我们通常所说的 getters，在 getters里可以访问到所有的 state变量，我们可以方便的用 getters定义一些需要计算的值。...: { }, mutations: { }, actions: { }, getters: { } }) 我们可以把有关 vuex的代码全部放在这个文件里

1.2K3 0

vuex的五大核心_vue如何实现跨域

大家好，又见面了，我是你们的朋友全栈君。 Vuex的核心概念 Vuex有5个核心概念，分别是State，Getters，mutations，Actions，Modules。...代码如下： new Vue({ el: "#app", store, }) 如果在组件中要展示store中的状态，应该使用计算属性来返回store的状态，代码如下： computed: {...显然，这都不理想 Vuex允许我们在store中定义getters（可以认为是store的计算属性）。...与计算属性一样，getter的返回值会根据它的依赖项被缓存起来，且只有在它的依赖项发生改变时才会重新计算。...如果想简化上述getter在计算属性中的访问形式，可以使用mapGetters辅助函数。

1.5K1 0

Vuex入门（3）—— getters,mapGetters,…mapGetters详解

Vuex提供了state这样的状态统一管理树,你可以在vue中用computed计算属性接收这些公共状态,以便使用,当然你也可以在接收原值的基础上对这个值做出一些改造,如 computed:{ sex...,vuex本身就提供了类似于计算属性的方式,getters可以让你从store的state中派生出一些新的状态,当然如果不是多个组件要用到这个状态,或者说每个子组件用到的派生属性不一样,那么,你完全可以不用...系列中会讲到.) 1.getters Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。...就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。...如何使用,可以看一下上面代码的注释,这里我重点介绍一下getters和computed的不同,就是上面的第三种用法,我之前在vue进阶系列中探讨过computed，filters两种数据处理工具的局限性

1.4K1 0

深入探索Vue Getters和mapGetters的原理及使用详解

什么是Vue Getters？Vuex中的getters可以被视为store的计算属性。...就像Vue组件中的计算属性一样，getters的返回值会基于其依赖被缓存起来，且只有当它的依赖值发生变化时才会重新计算。这使得getters非常适合用于从store中的state派生出一些状态。...Vuex是基于Vue的响应系统构建的，因此getters的实现与Vue的计算属性有很多相似之处。...为每一个getter定义了一个属性，这个属性的getter函数会返回计算后的结果。...这些计算属性的getter函数会返回this.$store.getters中的对应值。

2111 0

Vue进阶（二十七）：Vuex 之 getters, mapGetters, …mapGetters详解

大家好，又见面了，我是你们的朋友全栈君。...为了解决这个问题，vuex本身提供了类似于计算属性的方式，getters可以让你从store的state中派生出一些新状态，当然如果不是多个组件要用到这个状态，或者说每个子组件用到的派生属性不一样，那么...二、getters Vuex 允许在 store 中定义“getter”（可认为是 store 的计算属性）。...就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生改变才会被重新计算。...let findArr = function(state){ // 返回一个匿名函数 return function(number){ // 如果有相同的则返回n，如果找不到则返回

1.3K2 0

this，call，apply，bind（万字长文）

NaN 一个操作数为undefined，返回undefined 注意：当第一个操作数的值时false，则不对第二个操作数进行求值。...第一个操作数是对象，返回第一个操作数第一个操作数值为false，返回第二个操作数两个操作数都是对象，返回第一个操作数两个操作数都是null，返回null 两个操作数都是NaN，返回NaN 两个操作数都是...: { // getters相当与vue中的computed计算属性 getStateCount: function(state){ return...，getter的返回值会根据它的依赖被缓存起来，并且只有当它的依赖值发生了改变才会被重新计算。...Vuex.Store({ state: { count: 1 }, getters: { // getters相当与vue中的computed计算属性

1.2K3 0

Vuex 2.0 源码分析

源码分析本文的源码分析过程不会是自上而下的给代码加注释，我更倾向于是从 Vuex 提供的 API 和我们的使用方法等维度去分析。...传入这些对象，那么会分别进行注册，我稍后再去介绍注册的具体实现。...这个 _vm 对象会保留我们的 state 树，以及用计算属性的方式存储了 store 的 getters。来具体看看它的实现过程。...那么为何 mapState 函数的返回值是这样一个对象呢，因为 mapState 的作用是把全局的 state 和 getters 映射到当前组件的 computed 计算属性中，我们知道在 Vue 中...总结 Vuex 2.0 的源码分析到这就告一段落了，最后我再分享一下看源码的小心得：对于一个库或者框架源码的研究前，首先了解他们的使用场景、官网文档等；然后一定要用他，至少也要写几个小 demo，达到熟练掌握的程度

2K3 0

13期前端冲刺必备指南-thiscallapplybind（万字长文）

NaN 一个操作数为undefined，返回undefined 注意：当第一个操作数的值时false，则不对第二个操作数进行求值。...逻辑或 || 第一个操作数是对象，返回第一个操作数第一个操作数值为false，返回第二个操作数两个操作数都是对象，返回第一个操作数两个操作数都是null，返回null 两个操作数都是NaN，返回NaN...: { // getters相当与vue中的computed计算属性 getStateCount: function(state){ return...，getter的返回值会根据它的依赖被缓存起来，并且只有当它的依赖值发生了改变才会被重新计算。...Vuex.Store({ state: { count: 1 }, getters: { // getters相当与vue中的computed计算属性

7072 0

一文让你彻底搞懂 vuex，满满的干货

$store.state.online } } store 中的数据发生改变时，都会重新求取计算属性，并更新相关 DOM。...2》如果需要使用多个参数时，都使用 computed 计算属性，就会使代码变的有些冗余和复杂，此时我们就可以借助 mapState 辅助函数。...使用的时候一般有两种方式： 1》返回的结果只依赖于 state 中的数据 export default new Vuex.Store({ state:{ count:2, }, getters...2》getters 中返回的变异结果，依赖于某个 getters 中属性返回结果 export default new Vuex.Store({ state:{ count:2, }, getters...},2000) }) }, } //组件内调用 promise执行成功，返回"我学会了" methods:{ ok(){ this

8582 0

手把手教你使用Vuex，猴子都能看懂的教程

市面上关于vuex的教程多如牛毛，甚至vuex被某些大神都封装出花儿来了；一方面是想从最简单最基础的地方带大家使用一下vuex，另一方面也是想让自己复习一下vuex，好，不多废话了，接下来我们简单对vuex...$store.state.XXX最好放在计算属性中，当然，我也建议你这么使用，这样可以让你的代码看起来更优雅一些，就像这样： export default { mounted() { console.log...我：为什么？产品经理：我提需求还需要为什么吗？我：好，我加！这时候，你第一想到的是怎么加呢，emm...在每个页面上，使用this....Getter用起来了，你也能明白在什么时候应该用到getters，你可以通过计算属性访问（缓存），也可以通过方法访问（不缓存），你甚至可以在getters的方法里面再调用getters方法，当然你也实现了像...state那样，使用mapGetters解构到计算属性中，这样你就可以很方便的使用getters啦！

1071 0

Vuex 深入浅出超详细

类计算属性： Vuex 中的 getters 是用来从 store 的状态state中派生出一些状态的计算属性：类似于组件中的 computed 计算属性；计算和过滤： getters 用于对...state 进行计算和过滤，生成新的数据视图；有时我们还需要从state中派生出一些状态，这些状态是依赖state的，此时会用到getters 缓存机制： getters 的值会被缓存，只有当其依赖的...state 或其他 getters 发生变化时，才会重新计算；访问便捷： getters 可以通过 store.getters 访问，或者在 Vue 组件中通过 this....$store.getters 访问；这使得多个组件可以共享这些计算后的数据，避免代码重复 getters 案例Demo 例如： state中定义了list的数组，组件中，需要显示所有大于>5的数...; getters:{ // state中定义了list的数组,需要显示所有大于>5的数； // 必须有返回值，返回值就是getters的值 //

631 0

vuex知识点集合

$store 获取到vuex 中的store对象实例 state的数据：{{$store.state.count}} 方式二：计算属性将state属性定义在计算属性中...基础-getters 除了state之外，有时我们还需要从state中派生出一些状态，这些状态是依赖state的，此时会用到 getters.getters类似于vue中的 computed 计算属性...getters:{ // getters 接收 state 作为其第一个参数 // getters 必须要有返回值 return filterList:function(state...}} 方式二：通过外层的 getters（总的getters）来获取 const store = new Vuex.Store({ //...['updateToken']) } } 由此可见，子模块的mutations被暴露到了全局，子模块里面定义了多少方法，全局都可以轻而易举的拿到但是，如果我们想保证模块内部的高封闭性

6160 0

编写简单 vuex 的思路

Vuex 什么是Vuex Vuex 是专门为Vue.js设计的状态管理库 Vuex 采用集中式的方式存储需要共享的状态 Vuex 的作用是进行状态管理，解决复杂组件通信，数据共享 Vuex 集成到了...Vuex 核心概念： Store：每一个应用仅有一个Store Store是一个容器包含着应用的大部分状态 State：单一状态树，也是唯一的状态是响应式的 Getter：计算属性，对计算结果进行缓存...对象中的一个个方法都需要接受state参数,且都具有返回值(返回state简单处理的结果) this.getters = Object.create(null) // 遍历...传入的参数触发actions内部的方法时需要接收两个参数 context: 上下文,我这里是简易版所以传入store实例 payload: 用户传入的参数 dispatch(type, payload...对象中的一个个方法都需要接受state参数,且都具有返回值(返回state简单处理的结果) this.getters = Object.create(null); //

7213 0

测试一下Pinia，Vuex 要出局了？

自从我开始使用Vue 3和组合API以来，我也尝试使用 Pinea 作为状态管理库。如果是从是 vue2 和 vuex 过来的，就会觉得用起来差别还是很大的。...说实话，我对 Vuex 使用还是很不适应。最初，有 "很多 "的模板代码，只是让 store 使用减少。...Getters Getters可以被认为是计算过的属性，应该被用来从状态中获得一个修改过的响应。...我不知道你怎么想，但对我来说，这增加了一些心智负担，而我真的不需要。在使用Vuex之前，我对 "commit" 和 "dispatch" 这两个术语并不熟悉。...Getters getter 完全等同于 Store 状态的计算属性一个简单的Pinia store 的例子如下所示： export const useStore = defineStore('main

6161 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭