美文网首页
vue3+setup+uniapp 在app.vue中定义glo

vue3+setup+uniapp 在app.vue中定义glo

作者: holidayPenguin | 来源:发表于2024-06-16 18:02 被阅读0次

使用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 );
});

相关文章