关于vuex中state值更新后，getters没有更新的问题解决

最新推荐文章于 2025-06-19 19:49:09 发布
最新推荐文章于 2025-06-19 19:49:09 发布
阅读量7k 收藏 1
点赞数 1
CC 4.0 BY-SA版权
文章标签： javascript json ViewUI
原文链接：https://juejin.im/post/5a7fab63f265da4e983f0a88
本文讨论了在使用Vuex进行状态管理时，直接修改state对象可能导致的状态变更无法被正确监测的问题，并提供了解决方案：通过替换整个对象来更新state，确保Vuex能够监测到变化。

先看原来的mutation的写法【现在看起来是真的傻逼，虽然就是昨天下午的事情】

问题就出现在使用这样的写法直接修改/更新state对象中的值，没错state中的值是修改到了，但是vuex监测不到的，所以很简单的方法就是

换成这样就好了，整个对象去替换/赋值，这样vuex就能监测到state的变化，同事getters也会跟着变化了， 最后附上getters的函数

一个很简单的问题，搞了一会，分享出来大家一起吸取教训 要注意的还设有就是对数组和对象的操作都要注意这一点，因为vue和vuex的一些检测的原因，要特别注意这里的操作

vuex中state数据发生改变但是getters中的数据没有变化
AimeeH的博客
06-21 4958
最近在项目中遇到一个问题，提交了actions改变了state中cart对象的一个属性值，getter中依赖cart对象的值没有变化，在mutationl里面的操作如下： state.cart[params].buy_num++ 百度到vuex由于js的限制，不能检测到对象或者数组的属性变化。所以，解决办法就是拷贝出一个新的对象整个赋值到原来的对象中去，当整个对象改变才能检测到。例如...
vuex state值更改但是getters 未更新
走在实践的老路上
12-01 3812
实现效果：选择一种交通工具则出现对应的席别列表。 state： seatList: {},//初始席别 最后state结果： seatList: { '1':[{ code:"101", name:'经济舱' },{ code:"102", name:'公务舱' }], '2':[{ code:"201", name:'商务座' }, ... ] }, getters： seatListItem:(state)=>(key)=>
程序猿之Vue - Day07 - Vuex 状态管理：state、mutations、actions、getters 与模块化实战
最新发布
tang7mj的博客
06-19 701
Vuex状态管理核心摘要：Vuex是Vue官方状态管理工具，集中管理组件共享状态，适用于中大型项目。主要包含： 核心概念 State：存储应用状态 Mutations：同步修改状态（唯一方式） Actions：异步逻辑，调用Mutations Getters：派生状态 Modules：模块化管理状态 核心流程 遵循单向数据流：View → Action → Mutation → State → View，确保状态变更可追踪。 实战应用 通过模块化（namespaced）拆分复杂业务 购物车等场景综合运用四大
为什么vuex的getter拿不到最新的属性 vuex中state状态改变了但是getter没有更新
z00001993的博客
04-28 5273
问题背景： <newer :newrModalShow="$store.getters['order/getNewer']"v-if="newerDatas" :newerDatas="newerDatas"/> 如上：一个页面引入一个组件，通过vuex状态去控制显示隐藏，通过浏览器看的state状态改变了，但是getter却没拿到最新的状态 解决： ...
(待议-有问题)vuex 中state数据更新后，常规的属性调用 getter 读取state的值不更新 的解决
m0_61486963的博客
07-02 1970
vuex 中state数据更新后，常规的属性调用 getter 读取state的值不更新 的解决
vuex getters和mapGetters不更新的问题
热门推荐
_程昊的博客
03-26 1万+
在compents里面commit了state也更新了，但是getters和mapGetters却没有更新,显示undefined vuex代码: import {setCode, getCode} from '@/utils/api' import Vue from 'vue' const user = { states: { code: getCode(), current...
vuex中state值更新后，getters没有更新
05-12
在Vuex中，如果你的state已经被更新了，但是你的getter没有被更新，这可能是因为getter依赖的state值没有改变，Vuex不会重新计算getter的值。 你可以尝试在getter中添加一个参数，这个参数是getter的状态，可以手动...
vuex分模块后,实现获取state的值
11-20
在标题和描述中提到的问题是关于如何在一个模块中获取另一个模块的state值以及调用其他模块的方法。 首先，我们来看如何在分模块的Vuex中获取state的值： 1. **通过命名空间取值**：这是最直接的方式，你可以通过`...
实现vuex与组件data之间的数据同步更新方式
10-16
然而，有时我们可能会遇到一个问题，即如何在组件的`data`中同步更新Vuex store的状态。本文将详细解释这个问题，并提供两种解决方案。 在Vue组件中，`data`属性内的数据和视图之间保持着双向绑定，当`data`中的...
从Vuex中获取数据，数据不更新
weixin_56487494的博客
03-21 3634
原因是因为在在获取Vuex数据时，是在页面加载前进行获取，在加载完毕之后，Vuex的数据修改后，你子组件的页面还是初始的数据，并不会进行更新。Vuex中的数据修改之后，子组件的数据不会实时更新，需要切换到其他页面，在切换回来数据才会更新，渲染页面。1. 切换页面，重新获取到修改后的数据，很显然这个办法不符合现实使用场景。2.使用mapState，实时获取的Vuex中的数据状态。为什么会出现这种情况呢？
vuex，computed中 getters只执行了一次，state更新页面数据没有更新
Cheung1992的博客
09-13 2070
vuex，computed中 getters只执行了一次，state更新页面数据没有更新
解决$store.getters调用不执行的问题
10-16
今天小编就为大家分享一篇解决$store.getters调用不执行的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue中getters不更新数据解决办法
weixin_30468137的博客
08-27 1990
　　在 Vue.js devtools 中看到，我们明明更改了仓库 state 中的数据，但是我们的 getters 就是值渲染一次之后就不再重新渲染了 　　解决方法：使用 Vue.set() 方法，就是专门解决这个问题的，且我们只要是修改 state 里面的属性，不管是什么属性，都应该使用 Vue.set() 因为他不仅可以更改原来的属性的值， 　　还是可以设置新的属性 　...
vuex中state的数据发生变化，但是getters中的数据没有变化，或者报错： Error in render: "TypeError: Cannot read property 'name' o
朽木自雕的博客
12-15 1269
vuex中state的数据发生变化，但是getters中的数据没有变化 在vue-devtool中可以看数据都是undefined，报错如下（此时Mutation中是使用state.xxx=xxx进行数据赋值）： 或者报错： [Vue warn]: Error in render: "TypeError: Cannot read property '这里随便是什么' of undefin...
vuex中state对象中的值更新后getters没有监听到state数据的改变的问题，state数据跟新页面不刷新问题
weixin_38662465的博客
06-15 2329
问题就出现在使用这样的写法直接修改/更新state对象中的值，state中的值是修改了，但是vuex监测不到，所以很简单的方法就是整个对象去替换/赋值，这样vuex就能监测到state的变化，同时getters也会跟着变化 简单的处理方法是，将对象或数组转换成字符串，在转换回来，赋值就解决这个问题了 downNum(state,id){ //将对象转换一下，从新开辟内存空间保持，然后在从新赋值，完美解决 let cartGood=JSON.parse(JSON.stringif.
Vue数据更新页面却没有更新
weixin_38848724的博客
06-02 2630
在 Vue 中有两种类型的变量：响应式变量和非响应式变量。从后端获取的变量通常是响应式变量，也就是说它们会被 Vue 监测到变化并同步到页面上，如果你修改了这些响应式变量，页面会随之改变。而通过赋值来定义的变量通常是非响应式变量，如果你修改了这些非响应式变量，Vue 并不会监测到它们的变化，所以页面不会改变。如果你需要使一个非响应式变量变成响应式变量，可以使用 Vue.set 方法或者数组的变异方法（例如 push、splice 等）。例1：Vue.set(对象,添加的key,属性值”)
解决前端Vue数据不更新的问题：深入分析与解决方案
嗨，欢迎来到我的 优快云 博客小天地！一名深耕多年的技术发烧友。在这里，我将把日常工作中积累的宝贵经验，从复杂架构设计的精妙之处，到代码优化的实战技巧，毫无保留地分享给大家。
02-17 7067
解决前端vue数据不更新的问题，深入分析与解决方案
vuex——计算属性获取的getter值需要刷新才能更新
Juliet_xmj的博客
03-31 2222
vuex——计算属性获取的getter值需要刷新才能更新 描述： // state state: { leader: null }, // getters getters: { getLead: state => state.leader } // mutations mutations: { setLead (state, data) { state.leader = data } }, // 页面中赋值 // 登录时改变state.le
vuex getters和mapGetters 视图不更新的问题
qq_26642611的博客
04-27 3077
import { getInfo } from "@/api/user"; import Vue from "vue"; const state = { ExchangePointMinLimitValue: "" }; const mutations = { SET_EXCHANGEPOINTLIMITVALUE: (state, exchangepointminlimitva...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值