uni-app vue3应用onShow周期内无法访问App

uni-app vue3应用onShow周期内无法访问App

示例代码:

import { onShow } from "@dcloudio/uni-app";  
onShow(() => {  
  console.log("App Show");  
  console.log(getApp());  
  setTimeout(() => {  
    console.log(getApp());  
  }, 10)  
});

操作步骤:

见描述

预期结果:

见描述

实际结果:

见描述

bug描述:

  • vue2的onShow周期内可以通过this访问App对象,但是vue3使用onShow钩子:
    • onShow内直接getApp()返回undefined
    • onShow内的定时器里getApp()返回正常
    • onShow内this也是undefined

| 项目信息          | 版本/方式         |
|-------------------|------------------|
| 产品分类          | uniapp/小程序/微信 |
| PC开发环境操作系统 | Mac              |
| PC开发环境操作系统版本号 | 12.2.1           |
| 第三方开发者工具版本号 | 1.05.2111300     |
| 基础库版本号      | 2.23.4           |
| 项目创建方式      | CLI              |
| CLI版本号         | 3.0.0-alpha-3040520220408002 |
2 回复

那就 setTimeout 获取呀


uni-app 中使用 Vue 3 时,onShow 生命周期钩子是在页面显示时触发的。如果你在 onShow 钩子中无法访问 App 对象,可能是因为 onShow 钩子的执行时机或作用域的问题。

以下是一些可能的原因和解决方案:


1. onShow 钩子的作用域

onShow 是页面级别的生命周期钩子,而不是应用级别的。因此,在 onShow 中无法直接访问 App 实例。如果你需要访问全局的 App 实例,可以通过以下方式:

  • 使用 getApp() 方法获取 App 实例:
    import { getApp } from 'uni-app';
    
    export default {
      onShow() {
        const app = getApp();
        console.log(app); // 访问 App 实例
      }
    }

2. onShow 的触发时机

onShow 是在页面显示时触发的,但此时页面的 datasetup 可能还未完全初始化。如果你在 onShow 中访问某些变量或方法时遇到问题,可以尝试以下方法:

  • 使用 nextTick 确保 DOM 和数据已经更新:
    import { nextTick } from 'vue';
    
    export default {
      onShow() {
        nextTick(() => {
          // 在这里访问数据或方法
        });
      }
    }

3. 全局状态管理

如果你需要在多个页面或组件中共享数据,建议使用全局状态管理工具(如 VuexPinia),而不是直接依赖 App 实例。

  • 使用 Pinia 示例:
    // store.js
    import { defineStore } from 'pinia';
    
    export const useAppStore = defineStore('app', {
      state: () => ({
        appData: null
      }),
      actions: {
        setAppData(data) {
          this.appData = data;
        }
      }
    });
    
    // 页面中使用
    import { useAppStore } from '@/store';
    
    export default {
      onShow() {
        const appStore = useAppStore();
        console.log(appStore.appData); // 访问全局数据
      }
    }

4. 检查 App 实例的初始化

确保 App 实例在 onShow 触发之前已经初始化。如果 App 实例的初始化依赖于异步操作,可能会导致在 onShow 中无法访问。

  • 示例:
    export default {
      onLoad() {
        // 在 onLoad 中初始化 App 数据
        this.initAppData();
      },
      onShow() {
        // 在 onShow 中访问 App 数据
        console.log(this.appData);
      },
      methods: {
        async initAppData() {
          this.appData = await fetchAppData(); // 模拟异步操作
        }
      }
    }

5. 调试和日志

如果问题仍然存在,可以通过添加日志来调试 onShow 的执行时机和 App 实例的状态:

export default {
  onShow() {
    console.log('onShow triggered');
    const app = getApp();
    console.log('App instance:', app);
  }
}
回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!