Subscribe on changes!

当proxy对象的属性依赖一个computed值时,computed更新后proxy对象不更新

avatar
Aug 15th 2022

Vue version

3.2.13

Link to minimal reproduction

最小复现仓库地址

Steps to reproduce

/**

  • 出现问题
  • (1)当向store的name添加一个{age:1,name:'名字'}时,nameList的name属性不会更新
  • (2)当改变index索引时,nameList的name属性不会更新
  • 疑问
  • pinia的getter做依赖收集时,是否会收集nameList作为它的依赖,在上面场景中,getter似乎并没有将nameList作为依赖
  • 当store的name更新时,store.getName(index.value)没有去更新nameList的name属性 */

What is expected?

如何才能使computed变化时,更新proxy对象

What is actually happening?

computed更新时,proxy不更新

System Info

No response

Any additional comments?

No response

avatar
Aug 15th 2022

如果 sfc playground 不好复现,建议上传一个最小可复现的仓库,有助于调查问题。

avatar
Aug 16th 2022

我上传了一个最小可复现仓库,问题在App.vue中已记录 地址在这里

avatar
Aug 16th 2022
getName(state){
            return (index: number)=>{
                let temp:string[]=[]
                state.name[index].forEach((item)=>{
                    temp.push(item.name)
                })
                return temp
            }
        }

这个 getter 这么写和一个普通的函数没什么区别,computed 的追踪在第一个 return 后就已经结束,不会为返回的函数添加依赖。这么调用 store.getName(index.value) 只会返回一个普通的 temp

avatar
Aug 16th 2022

有什么办法能让组件中的proxy对象的属性依赖 getName(state){ return (index: number)=>{ let temp:string[]=[] state.name[index].forEach((item)=>{ temp.push(item.name) }) return temp } } 这样的getter,并且当store中的state变化时,proxy对象属性也更新吗?

avatar
Aug 16th 2022

有什么办法能让组件中的proxy对象的属性依赖 getName(state){ return (index: number)=>{ let temp:string[]=[] state.name[index].forEach((item)=>{ temp.push(item.name) }) return temp } } 这样的getter,并且当store中的state变化时,proxy对象属性也更新吗?

使用 watch 或者 watchEffect 监听 indexstore 中的数据手动赋值nameList。