uni-app 自定义组件编译模式中使用vuex+计算属性computed的时候this指向有问题

uni-app 自定义组件编译模式中使用vuex+计算属性computed的时候this指向有问题

详细问题描述

（DCloud产品不会有明显的bug，所以你遇到的问题大都是在特定环境下才能重现的问题，请仔细描述你的环境和重现方式，否则DCloud很难排查解决你的问题）

[内容]

重现步骤

[步骤] 运行直接报错，把_self换成this才有效，如果用_self则直接报一大堆错，但是之前项目中都是使用的_self，求助

[结果]

[期望]

[如果语言难以表述清晰，拍一个视频或截图，有图有真相]

IDE运行环境说明

[HBuilder 或 HBuilderX。如果你用其他工具开发uni-app，也需要在此说明]

[IDE版本号]

[windows版本号]

[mac版本号]

uni-app运行环境说明

[运行端是h5或app或某个小程序？]

[运行端版本号]

[项目是cli创建的还是HBuilderX创建的？如果是cli创建的，请更新到最新版cli再试]

[编译模式是老模板模式还是新的自定义组件模式？]

App运行环境说明

[Android版本号]

[iOS版本号]

[手机型号]

[模拟器型号]

附件

[IDE问题请提供HBuilderX运行日志。菜单帮助-查看运行日志，点右键打开文件所在目录，将log文件压缩成zip包上传]

[App问题请提供可重现问题的代码片段，你补充的细一点，问题就解决的快一点]

[App安装包或H5地址]

[可重现代码片段]

联系方式

[QQ]


更多关于uni-app 自定义组件编译模式中使用vuex+计算属性computed的时候this指向有问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

顶贴顶贴，求解决

更多关于uni-app 自定义组件编译模式中使用vuex+计算属性computed的时候this指向有问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


执行时机问题，你这样的代码，依赖于 onLoad 和 computed 的执行顺序，要求必须先 onLoad，再执行 computed 等其他逻辑，很容易出 bug 的。 另外考虑如下场景，A 页面跳转 A 页面，你这个_self 就会变成第二个 A 页面的 this， 这样使用还容易造成内存泄漏，始终释放不了当前的页面对象

直接用this?好像如果不用箭头函数的话会出现this指向问题吧？

回复 1***@qq.com: Vue 内定义的方法之类的可以直接 this，uni 的 api 回调用箭头函数

回复 DCloud_UNI_FXY: 那为什么之前好好地，最新版编辑器白分之百报错

回复 1***@qq.com: onLoad 和 computed 两种模式执行顺序不一致。自定义模式下 computed 执行早于 onLoad 以保证尽快渲染页面

在uni-app自定义组件模式下使用vuex+computed时出现this指向问题，通常是由于编译模式差异导致的。以下是关键分析：

  1. 在自定义组件模式下，组件实例的上下文处理方式与老模板模式不同。建议统一使用this来访问vuex和组件实例。

  2. 典型解决方案：

  • 确保computed属性使用箭头函数或正确绑定this
computed: {
  storeData() {
    return this.$store.state.xxx
  }
}
回到顶部