vue定义在computed的变量无法更新

最新推荐文章于 2025-07-04 08:43:14 发布

原创最新推荐文章于 2025-07-04 08:43:14 发布 · 6.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

前端同时被 2 个专栏收录

60 篇文章

订阅专栏

vue

38 篇文章

订阅专栏

在Vue的详情页面中，通过路由参数加载items数组中的商品信息。首次加载正常，但后续切换商品时，数据未实时更新，仍显示旧商品信息。问题出在computed属性的缓存特性，即使this.focus和this.idx改变，item并未更新。原因是使用了keepalive路由设置，导致页面不会被销毁。解决方案是将keepalive设为false，确保每次切换商品时页面重新渲染。

情境是这是线上商城的详情页面，商品详情是items数组，点击分类页面的商品，路由跳转到详情页面，路由参数是商品在items中的序号。
但是问题是只有第一次点击商品i的时候可以正常加载items[i]的数据到html中，退出后点击商品j，发现加载的还是商品i的信息，只有刷新后才会更新成商品j的信息。
部分代码：

        <shopPanel
            :key = "nums"
            :goodname="item.text"
            :tag="item.tag"
            :sale="item.sale"
            :price="item.price"
            :ori="item.ori_price"
        >
        </shopPanel>

和computed定义的，注意这里定义的数据item，是不能够修改的，想修改只能用set来修改。我这里测试时发现明明item关联的两个属性this.focus和this.idx改变了，那为什么item没有改变呢？而且是刷新后就能改变。

        computed: mapState({
            items:'items', //商品详情信息
            item(){
                console.log(this.focus+" "+this.idx);
                return this.items[this.focus].children[this.idx]
            }
        }),

最后的原因竟然是定义路由的时候选择了keepalive，页面不会销毁，改成false就行。

        path: '/item/item01',
        name:'itemdetail',
        meta: {
            title: '商品1',
            keepAlive: false,
            showTab: false
        },
        component: (resolve) => require(['../page/itemdetail/item01'], resolve),