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

Vuex: getters总是返回初始值

Vuex是一个专为Vue.js应用程序开发的状态管理模式。它可以帮助我们在应用程序中集中管理和共享状态,使得状态的变化可预测且易于调试。

在Vuex中,getters是用于从store中获取状态的计算属性。它们可以对store中的状态进行一些计算或过滤,并返回计算后的结果。getters可以接收state作为第一个参数,并可以通过在getter函数中返回一个函数来实现传参。

对于getters总是返回初始值的问题,可能有以下几个原因:

  1. 未正确定义getters:在Vuex中,我们需要在store中定义getters,并通过getters对象来声明和访问它们。如果没有正确定义getters,那么它将无法返回正确的值。
  2. 未正确使用getters:在组件中使用getters时,需要使用this.$store.getters来访问。如果没有正确使用getters,可能会导致返回初始值。
  3. 状态未正确更新:如果状态没有正确更新,那么getters获取的值可能仍然是初始值。在Vuex中,我们需要使用mutations来更新状态,确保状态的变化能够被getters正确获取。

针对这个问题,我们可以按照以下步骤进行排查和解决:

  1. 确认是否正确定义了getters,并在store中进行了声明和访问。
  2. 确认是否正确使用了getters,在组件中使用this.$store.getters来访问。
  3. 检查状态是否正确更新,确保使用mutations来更新状态。

如果以上步骤都没有解决问题,可以考虑在getters中添加一些调试信息,例如在getters中打印状态的值,以便进一步排查问题。

对于腾讯云相关产品和产品介绍链接地址,由于要求不能提及具体的云计算品牌商,我无法给出具体的链接地址。但腾讯云提供了一系列云计算相关的产品和服务,可以通过腾讯云官方网站进行查找和了解。

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

相关·内容

vue详解_vuex getters

Vuex是做什么的? 官方解释:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。 它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。...Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new window),提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。...但是也有一些状态(状态a/状态b/状态c)属于多个视图共同想要维护的 状态1/状态2/状态3你放在自己的房间,你自己管理自己用,没问题 但是状态a/状态b/状态c我们希望交给一个大管家来统一帮助我们管理 那么Vuex...就是帮助我们统一管理的大管家 全局单例模式 我们现在要做的就是将共享的状态抽离出来,交给我们的大管家进行统一管理 之后,我们的每个视图,按照规定好的规定,进行访问和修改操作 这就是Vuex背后的思想...Vuex状态管理图例 发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/165718.html原文链接:https://javaforall.cn

35830

【手写Vuex】-手撕Vuex-实现getters方法

首先在创建 Store 仓库的时候,需要传递一个 getters 对象,这个对象中存放的就是我们需要共享的数据,getters 对象中的每一个属性都是一个函数,这个函数的返回值就是我们需要共享的数据。...我们先编写一下如上所说的内容代码方面的实现,更改 store/index.js: export default new Vuex.Store({ state: { name: '...$store.getters拿到这个getters对象,既然能拿到这个getters对象,我们就可以通过 .myName 拿到需要共享的属性。...getters的属性 将传递进来的getters中的方法添加到当前Store的getters上 将getters中的方法执行, 并且将state传递过去 代码如下: class Store {...= options.getters || {}; // 2.在Store上新增一个getters的属性 this.getters = {}; // 3.

16251

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

(这里多说一句吧,vuex的出现是为了解决组件间的通信问题,如果你的操作或者数据不涉及到公共操作,只是单一组件操作,请务必不要把这些状态值或者function存储到vuex中,因为vuex会把自身挂载到所有组件上...系列中会讲到.) 1.getters Vuex 允许我们在 store 中定义“getter”(可以认为是 store 的计算属性)。...就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。...则没有这个烦恼,有些对ES6语法使用较为吃力的同学可以看下面的简易版本,来看看findArr究竟做了什么. let findArr = function(state){ // 返回一个匿名函数...return function(number){ // 如果有相同的则返回n,如果找不到则返回undefined let ifExit = state.arr.find(function

83110

Vuex-1 ===>vuexdemo,getters,Mutation

但是后面看到Vuex支持响应式管理咱就明白了,这玩意八成内部结合一些监听机制自己实现了,虽然咱们也可以自己造轮子,但是没必要~ 二 VueX的使用范围 我们一般应用VueX来保存一些多个界面或者说组件之间共享或公共的一些状态和数据...四 Vuex推荐的状态管理方式 如上图,Vuex推荐用规定好的方式(由Mutations进行修改),进行访问和修改等操作,下图是一个demo 五 .Vuex getters vuexgetters...类似于对象属性,如果我们需要从store中获取一些state变异后的状态,比如下面栗子: 注意:我们利用getter计算state的属性时候需要在参数里传state getters默认是不能传递参数的..., 如果希望传递参数, 那么只能让getters本身返回另一个函数....比如上面的案例中,我们希望返回大于传过来的年龄的对象 注意: - 这里的getter里的函数,我们必须先返回一个函数在函数内指定接收的参数 - 并在函数内return一个返回值. 六.

1.1K30

Vue进阶(二十七):Vuexgetters, mapGetters, …mapGetters详解

文章目录 一、前言 二、getters 三、mapGetters 辅助函数 四、….mapGetters 五、拓展阅读 ---- 一、前言 Vuex提供了state状态统一管理树,开发者可以在vue中用...为了解决这个问题,vuex本身提供了类似于计算属性的方式,getters可以让你从store的state中派生出一些新状态,当然如果不是多个组件要用到这个状态,或者说每个子组件用到的派生属性不一样,那么...二、getters Vuex 允许在 store 中定义“getter”(可认为是 store 的计算属性)。...就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生改变才会被重新计算。...let findArr = function(state){ // 返回一个匿名函数 return function(number){ // 如果有相同的则返回n,如果找不到则返回

87720

Vuex是什么?Vuex能做什么?Vuex怎么使用?

应用实例: 1、购物车功能; 2、下单页面有选择优惠券按钮,点击进入优惠券页面,选择后返回到下单页,数据会绑定回来,显示已选择的优惠券; 3、登录状态等等 ? Vuex有哪几种属性?...映射到当前组件的 computed 计算属性中 Vuex的Getter特性 1、getters 可以对State进行计算操作,它就是Store的计算属性 2、虽然在组件内也可以做计算属性,但是getters...Vuex的Module特性 Module 可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰,方便管理。...' export default{ //与vuex中的getters关联 computed: mapGetters([ ]), //与vuex中的actions关联.../vuex/store'; ... new Vue({ ... store ... }) Vuex常见错误 ? 很多时候,总是不知不觉的直接改变 store 中的状态。

9.3K51

【初学者笔记】一文学会使用Vuex

VueX中的核心内容 vuex中,有默认的五种基本的对象: state:存储状态(变量) getters:对数据获取之前的再次编译,可以理解为state的计算属性。...我们在state.js中声明一个状态count,初始值为0,然后在组件中输出它 // state.js export default { count:'0' }; //组件中 ...以及mapGetters 什么是getters getters:对数据获取之前的再次编译,getters返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。...如何使用getters getters中的方法有两个默认参数 state 当前VueX对象中的状态对象 getters 当前getters对象,用于将getters下的其他getter拿来用 //state.js...通过方法访问 我们可以通过让 getters 返回一个函数,来实现给 getters 传参。这样在对 store 里的数组进行查询时非常有用。

4.6K30

vue结合vuex实现购物车

vuex构造store非常简单,但是要先把数据抽离出来,然后用这个数据结合vuex组装成store,那么我们这个应用需要用到什么数据呢?...这里需要注意一下:标识商品是否被选中的属性checked不应该是后端服务器返回给前端数据中包含的属性。...告诉容器根据相应指令修改carlist,getcatlist指令获取远程数据更新冰箱中的carlist,这里注意一个细节,我们从远端获取数据后并不是直接将数据放进容器,而是用map处理了一下,为每个商品初始化选中状态,初始值...最后是gettersgetters类似容器的一个窗口,通过这个窗口我们能实时观察到数据变化,通过这些变化得到我们想要的数据(被选中的商品的总件数、总价格)。...count也是props属性,所以不能直接修改,所以我们直接在组件内部的data属性新建一个newcount属性,初始值为count,我们将newcount绑定到input上,注意不能使用v-model

2.2K30
领券