在Vue的原型链上挂载全局变量

在Vue3上挂载

首先编写一个要挂载的变量

// 判断手机浏览器
let brower = {
  Android: function () {
    return navigator.userAgent.match(/Android/i);
  },
  iOS: function () {
    return navigator.userAgent.match(/iPhone|iPad|iPod/i);
  },
  Windows: function () {
    return navigator.userAgent.match(/IEMobile/i);
  },
  any: function () {
    return (this.Android() || this.BlackBerry() || this.iOS() || this.Opera() || this.Windows());
  },
  isWx: function() {
    var ua = window.navigator.userAgent.toLowerCase();
    if(ua.match(/MicroMessenger/i) == 'micromessenger'){
      return true;
    }else{
      return false;
    }
  },
  isAndroid: function() {
    console.log(brower) 
    console.log(this)
    return this.Android() == 'Android';
  },
  set(key, value) {
    this[key] = value;
  }
};

export default brower;

如上，编写一个判断浏览器的对象，目的将这个对象挂载到vue.prototype上。

注意！Vue3中不允许在对象中如：let b = { isWX: function() {....}(), isXXX: func() {..} ... }，在对象函数后面加上括号让其直接执行，这会导致在加载的时候因为this是指向undefined导致报错。

在main.js中引入并在App.vue中使用

import { createApp } from 'vue';
import App from './App.vue';
import router from './router/index';
import VConsole from 'vconsole';
import brower from "common/js/brower";

let app = createApp(App);
app.use(router);
if (window.setting.open_vconsole) {
  var vConsole = new VConsole();
  app.use(vConsole);
}
// 注意这里必须要加$！！否则在组件中无法被访问到！访问也要在组件中使用this.$brower!
app.config.globalProperties.$brower = brower;
app.mount('#app');

Vue3要像vue2是的将变量挂载到原型链上，需要使用config.globalProperties！

在App.vue中使用brower变量：

created() {
   // 注意只有在调用的时候再执行对象中的函数，那样在brower中才能正确打印this!
    console.log(this.$brower.isAndroid())
},
-------------------------
切记！
let b = {
  a: function() {
    console.log(b);     
    console.log(this); 
  }() // 如果是自执行，那么会因为找不到this和b而报错！this=b=undefined! 不能使用自执行！
}

在Vue2上挂载

编写一个变量文件作为模块导出

let defined = {
  // 固定的变量参数
  btnCanUse: false,
  closeFormValid: false,
  set(key, value) {
    this[key] = value;
  }
};

export default defined;

在main.js中加入原型链

import Vue from 'vue';
import App from './App.vue';
import defined from "common/js/defined";

// 将变量挂载到Vue的原型链上
Vue.prototype.defined = defined;

Vue.use(一些插件);
new Vue({
  render: h => h(App),
}).$mount('#app');

Vue2在这方面简直好理解的太多。直接挂在原型链上就行。使用：

created() {
  if(!this.defined.btnCanUse) {
      this.defined.set('btnCanUse', true);
   }
}

时代是向前发展的，我们还是多熟悉Vue3吧！

相关资料