vue3+setup+uniapp 在app.vue中定义globalData的几种方式

使用vue2方式

不使用setup语法糖,这样会在app.vue中存在两个script,这种方式导致在app.vue中的setup语法糖获取globalData比较吃力

<script lang="ts">
  export default {
    onLaunch(options) {
      console.log('App Launch', options)
    },
    globalData: {
      text: 'text'
    }
  }
</script>
<script setup lang="ts">
const instance = getCurrentInstance()

onLaunch((options) => {
  // @ts-ignore
  // const globalData = instance.ctx.globalData
  console.log("App Launch111", options, globalAA)
})
</script>

使用vue3的方式

主要是使用 provide 和 inject


type methodType = 'provide' | 'inject'

type GlobalDataType = {
  appId?: string
}

interface IUseGlobalData {
  (method?: methodType): GlobalDataType
}

const useGlobalData: IUseGlobalData = (method = 'inject') => {
  if (method === 'inject') {
    return inject<GlobalDataType>('GlobalData', {})
  }

  const data:GlobalDataType = {}

  provide('GlobalData', data)

  return data
}

export default useGlobalData

app.vue

<script setup lang="ts">

const globalData = useGlobalData('provide')

onLaunch((options) => {
  console.log("App Launch", options, globalData);
  globalData.appId = '123'
})

onShow(() => {
  console.log("App Show", globalData);
});

onHide(() => {
  console.log("App Hide");
});

</script>

其他地方

const globalData = useGlobalData()

onLoad(() => {
  console.log("Index onLoad", globalData );
});

onShow(() => {
  console.log("Index onShow", globalData );
});
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容