vuex中state数据发生改变但是getters中的数据没有变化

最新推荐文章于 2023-11-22 11:09:47 发布
最新推荐文章于 2023-11-22 11:09:47 发布
阅读量4.8k 收藏 1
点赞数 1
文章标签： vuex vue的数据双向绑定
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AimeeH/article/details/93203796
版权

最近在项目中遇到一个问题，提交了actions改变了state中cart对象的一个属性值，getter中依赖cart对象的值没有变化，在mutationl里面的操作如下：


  state.cart[params].buy_num++

百度到vuex由于js的限制，不能检测到对象或者数组的属性变化。所以，解决办法就是拷贝出一个新的对象整个赋值到原来的对象中去，当整个对象改变才能检测到。例如下面：


      state.cart[params].buy_num++
      let cart = {}
      for(var item in state.cart){
         cart[item] = state.cart[item]
      }
      state.cart = cart

这样子处理后，我的getters里那个依赖state.cart的值就发生改变了。

啦啦啦啦，又踩过了一个小坑。。。

AimeeH
关注
Vuex中getters动态获取state的值
qq_39811414的博客
11-10 4106
前言 在做项目时，getters里有很多冗余代码，但是仔细一看可以根据参数来解决，于是决定使用传参来进行获取，减少代码冗余。 案例 需求：在getters里能够根据值动态获取到people的元素。经过多次尝试，最终得到下面的代码。 state.js代码如下： export default { people: [ { name: 'zs', age: 14 }, { name: 'ss', age: 24 }, {
实现vuex与组件data之间的数据同步更新方式
10-16
默认情况下，当`state`中的数据变化，直接在组件模板中通过`$store.state`访问的数据会自动更新，但若将`state`的数据赋值给`data`，则不会自动同步。这是因为在Vue生命周期中，组件的`data`在初始化时仅获取了一次`...
vuex提交state&&实时监听state数据的改变方法
10-18
今天小编就为大家分享一篇vuex提交state&&实时监听state数据的改变方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
关于vuex中state值更新后，getters没有更新的问题解决
weixin_34357887的博客
02-11 6942
先看原来的mutation的写法【现在看起来是真的傻逼，虽然就是昨天下午的事情】 问题就出现在使用这样的写法直接修改/更新state对象中的值，没错state中的值是修改到了，但是vuex监测不到的，所以很简单的方法就是 换成这样就好了，整个对象去替换/赋值，这样vuex就能监测到state的变化，同事getters也会跟着变化了， 最后附上getters的函数 一个很简单的问题，搞了一会，...
vuex state值更改但是getters 未更新
走在实践的老路上
12-01 3691
实现效果：选择一种交通工具则出现对应的席别列表。 state： seatList: {},//初始席别 最后state结果： seatList: { '1':[{ code:"101", name:'经济舱' },{ code:"102", name:'公务舱' }], '2':[{ code:"201", name:'商务座' }, ... ] }, getters： seatListItem:(state)=>(key)=>
为什么vuex的getter拿不到最新的属性 vuex中state状态改变了但是getter没有更新
z00001993的博客
04-28 5160
问题背景： <newer :newrModalShow="$store.getters['order/getNewer']"v-if="newerDatas" :newerDatas="newerDatas"/> 如上：一个页面引入一个组件，通过vuex状态去控制显示隐藏，通过浏览器看的state状态改变了，但是getter却没拿到最新的状态 解决： ...
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中的数据没有变化，或者报错： Error in render: "TypeError: Cannot read property 'name' o
朽木自雕的博客
12-15 1218
vuex中state的数据发生变化，但是getters中的数据没有变化 在vue-devtool中可以看数据都是undefined，报错如下（此时Mutation中是使用state.xxx=xxx进行数据赋值）： 或者报错： [Vue warn]: Error in render: "TypeError: Cannot read property '这里随便是什么' of undefin...
vue.js中引入vuex储存接口数据及调用的详细流程
10-18
Vuex是Vue.js的状态管理模式和库，它集中存储应用的所有状态（state），并以相应的规则保证状态以可预测的方式发生变化。本文将详细介绍如何在Vue.js中引入Vuex来管理接口数据，并且在组件中调用这些数据。 **Vuex...
Vuex中的State使用介绍
10-17
例如，我们有一个商品列表的数据状态，就会将这个数据保存在state中，并且定义为响应式数据，这样任何组件对该数据的读取都是实时的，当state发生改变时，依赖该数据的组件也会自动更新。 其次，通过npm安装Vuex库...
vue中getters不更新数据解决办法
weixin_30468137的博客
08-27 1928
　　在 Vue.js devtools 中看到，我们明明更改了仓库 state 中的数据，但是我们的 getters 就是值渲染一次之后就不再重新渲染了 　　解决方法：使用 Vue.set() 方法，就是专门解决这个问题的，且我们只要是修改 state 里面的属性，不管是什么属性，都应该使用 Vue.set() 因为他不仅可以更改原来的属性的值， 　　还是可以设置新的属性 　...
vuex中state对象会数组中的值更新后getters没有监听到state数据的改变的问题state数据跟新页面不刷新问题
JackieDYH的博客
06-14 3921
问题就出现在使用这样的写法直接修改/更新state对象中的值，没错state中的值是修改到了，但是vuex监测不到的，所以很简单的方法就是整个对象去替换/赋值，这样vuex就能监测到state的变化，同事getters也会跟着变化了 赋值之后不会触发getter方法刷新，修改为深拷贝之后即可触发getter刷新 简单的处理方法是，将对象或数组转换成字符串，再转换回来，赋值就解决这个问题了 downNum(state,id){ //将对象转换一下，从新开辟内存空间保持，然后在从新赋值，...
(待议-有问题)vuex 中state数据更新后，常规的属性调用 getter 读取state的值不更新 的解决
m0_61486963的博客
07-02 1909
vuex 中state数据更新后，常规的属性调用 getter 读取state的值不更新 的解决
vuex中state对象中的值更新后getters没有监听到state数据的改变的问题，state数据跟新页面不刷新问题
weixin_38662465的博客
06-15 2222
问题就出现在使用这样的写法直接修改/更新state对象中的值，state中的值是修改了，但是vuex监测不到，所以很简单的方法就是整个对象去替换/赋值，这样vuex就能监测到state的变化，同时getters也会跟着变化 简单的处理方法是，将对象或数组转换成字符串，在转换回来，赋值就解决这个问题了 downNum(state,id){ //将对象转换一下，从新开辟内存空间保持，然后在从新赋值，完美解决 let cartGood=JSON.parse(JSON.stringif.
vuex，computed中 getters只执行了一次，state更新页面数据没有更新
Cheung1992的博客
09-13 1765
vuex，computed中 getters只执行了一次，state更新页面数据没有更新
从Vuex中获取数据，数据不更新
weixin_56487494的博客
03-21 3387
原因是因为在在获取Vuex数据时，是在页面加载前进行获取，在加载完毕之后，Vuex的数据修改后，你子组件的页面还是初始的数据，并不会进行更新。Vuex中的数据修改之后，子组件的数据不会实时更新，需要切换到其他页面，在切换回来数据才会更新，渲染页面。1. 切换页面，重新获取到修改后的数据，很显然这个办法不符合现实使用场景。2.使用mapState，实时获取的Vuex中的数据状态。为什么会出现这种情况呢？
vue项目开发中，vuex里面的sotre数据改变，但是没有触发getter并没触发，视图也不更新的笔记
qq_42375089的博客
08-22 2609
　　在vue 和 vuex 的开发中，我们可能会遇到一些奇葩的问题，比如说下面的我在开发里遇到的一个奇葩问题。 　vuex 的数据 /** * 获取表格数据 VUEX */ import init from '../../api/init/init' const state = { tableData: { // 表格数据 content: [], // 表格数据 ...
vue3 pinia 中actions修改状态不生效
weixin_44707050的博客
01-29 3565
在组件中使用时，如果直接操作store.getaddcount()则页面上数据变动不生效。如上述代码，在actions中定义getaddcount方法 对count做了操作。解决：引入pinia中的storeToRefs。使store中的变量变为响应式的即可；
问题：vue2修改对象属性值，数据改变，但是页面视图不更新
最新发布
qq_44792224的博客
11-22 5110
v-if不要绑定数组元素，无效，数组元素内容的变化无法响应v-if绑定对象属性 {1: true, 2: false}，如果提前写死，v-if绑定其中一个属性，则可以生效v-if如果对象的属性数量不定，是通过某方法的触发去改变对象的属性数量。需要使用$set()//增改都适用this.$set(this.对象名， 属性名， 新值)//不可以使用下面的方法更新this.对象.属性 = 新值//或者this.对象[属性] = 值只要所有修改或者增加属性的语句都使用，就能解决v-if。
vue3监听vuex中数据变化
05-11
在Vue 3中，你可以使用`watch`函数来监听Vuex中的数据变化。具体步骤如下： 1. 在组件中引入Vuex store，可以使用`useStore`函数来获取store实例： ```javascript import { useStore } from 'vuex' export default { setup() { const store = useStore() // ... } } ``` 2. 使用`watch`函数监听store中的数据变化，需要传入两个参数：要监听的数据（可以是getter函数）和回调函数。 ```javascript import { useStore, watch } from 'vuex' export default { setup() { const store = useStore() // 监听state中的count变化 watch(() => store.state.count, (newValue, oldValue) => { console.log(`count变化了，新值为${newValue}，旧值为${oldValue}`) }) // 监听getter中的userInfo变化 watch(() => store.getters.userInfo, (newValue, oldValue) => { console.log(`userInfo变化了，新值为${newValue}，旧值为${oldValue}`) }) // ... } } ``` 这样就可以监听Vuex中任意数据的变化了。需要注意的是，`watch`函数必须在`setup`函数内部使用。另外，在Vue 3中，如果要监听响应式对象的变化，建议使用`watchEffect`函数。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值