computed里面的问题
carlist里面的count 发生也没有重新触发computed
这里computed不是很明白什么意思
补充代码:
<template>
<div>购物车数量:{{ total }}</div>
<!-- <div>购物车统计:0</div> -->
</template>
<script>
import { useStore } from "vuex";
import { computed } from "vue";
export default {
setup() {
const store = useStore();
const cartList = store.state.cartList;
console.log("从state拿的数据是proxy::::", cartList);
//假设shopid=1
const total = computed(() => {
console.log("carlist1:::",cartList[1]);
const productList = cartList[1];
console.log(123);
return productList; //返回的东西必须包含外部动态变化的数据
});
return { total }; //计算属性是不用拆解proxy返回出去的
},
};
</script>
<style scoped>
</style>
正在回答
同学你好,解答如下:
computed监听对象时,如果对象的引用地址未改变,那么computed方法中的代码可能会无法执行。初始时,
cartList是undefined,此时会执行computed中的代码,打印一个123;点击一次按钮后,cartList不再是undefined,而变成了一个对象,数据类型改变了,所以会执行computed里面的代码,打印一个123;再次点击按钮,由于cartList的地址没有改变(只是属性变了),所以监听会有问题,页面数据会跟着联动,但是不会再打印123,因此打印结果不对应。
可以考虑换成watch,利用watch方法实现深度监听,监听对象的属性,如果属性改变也执行方法中的代码:
祝学习愉快!
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星