使用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 );
});
网友评论