vue.js3: 使用全局变量(vue@3.2.37)

一，js代码:

1,main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './route'

//判断是否移动端的函数
const isMobileFunc = () => {
    let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);
    if (flag === null) {
        return 0;
    } else {
        return 1;
    }
};

const app = createApp(App)
app.use(router)
// 定义全局变量:平台
if (isMobileFunc() == 1) {
    app.config.globalProperties.$platForm= "mobile";
} else {
    app.config.globalProperties.$platForm= "pc";
}
// 定义全局变量:浏览器的宽高
app.config.globalProperties.$screenSize={
    width:0,
    height:0,
};
app.mount('#app')

2,App.vue

<template>
  <router-view />
</template>
<script>
import {onMounted} from "vue";
import {getCurrentInstance} from 'vue'
export default {
  name: 'App',
  setup() {
     onMounted(()=>{
       let globalProperties = getCurrentInstance().appContext.config.globalProperties;
       //得到浏览器的宽高
       let screen = {
         width:document.documentElement.clientWidth,
         height: document.documentElement.clientHeight,
       };
       globalProperties.$screenSize = screen;
       //窗口改变大小时
       window.onresize = () => {
         let screen = {
           width:document.documentElement.clientWidth,
           height: document.documentElement.clientHeight,
         };
         globalProperties.$screenSize = screen;
       }
     })
  }
}
</script>

<style>
html,body{
  margin:0;
  padding:0;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  /*margin-top: 60px;*/
}
</style>

3,Home.vue

<template>
<div>
  <router-link :to="{ path: '/code/code', query: { codeId: 123 }}">
    去code页面
  </router-link>
  platform:{{platForm}}<br/>
  screen width:{{$screenSize.width}}<br/>
  screen height:{{$screenSize.height}}<br/>
</div>
</template>

<script>
import {getCurrentInstance,ref} from 'vue'
export default {
  name: "HomePage",
  setup() {
    let globalProperties = getCurrentInstance().appContext.config.globalProperties;

    const platForm = ref(globalProperties.$platForm);
    const screenSize= ref(globalProperties.$screenSize);
    return {
        platForm,
        screenSize,
    }
  }
}
</script>

<style scoped>
</style>

说明：刘宏缔的架构森林是一个专注架构的博客，

网站：https://blog.imgtouch.com
本文: https://blog.imgtouch.com/index.php/2023/06/02/vue-js3-shi-yong-quan-ju-bian-liang-vue-3-2-37/

         对应的源码可以访问这里获取： https://github.com/liuhongdi/
         或: https://gitee.com/liuhongdi

说明：作者:刘宏缔 邮箱: 371125307@qq.com

二，测试效果

三，查看vue框架的版本:

liuhongdi@lhdpc:/data/vue/child$ npm list vue
child@0.1.0 /data/vue/child
├─┬ @vue/cli-plugin-babel@5.0.6
│ └─┬ @vue/babel-preset-app@5.0.6
│   └── vue@3.2.37 deduped
├─┬ vue-router@4.1.2
│ └── vue@3.2.37 deduped
└─┬ vue@3.2.37
  └─┬ @vue/server-renderer@3.2.37
    └── vue@3.2.37 deduped