Una breve discusión sobre cómo definir variables globales y funciones globales en el proyecto Vue
Escrito al frente:
Como dice el título, en los proyectos, a menudo es necesario reutilizar algunas funciones y variables, como la dirección del servidor del sitio web, que se obtiene del backend: token de inicio de sesión del usuario, información de la dirección del usuario, etc. En este momento, es necesario configurar una ola de variables globales y funciones globales. Estas dos configuraciones no son difíciles y tienen algunas características comunes. Es posible que algunos amigos no sepan mucho sobre esto. , así que siéntete libre de escribirlo y compartirlo. Los amigos necesitados pueden hacer una referencia. Si les gusta, pueden darle me gusta o seguirlo. Espero que pueda ayudar a todos.
Definir variables globales
Principio:
Establezca un archivo de módulo de variable global dedicado, defina algunos estados iniciales de las variables en el módulo y utilice la exportación predeterminada para exponer Utilice Vue.prototype en main.js para montarlo en la instancia de vue o cuando necesite usarlo en otro lugar, simplemente introduzca este módulo.
Archivo de módulo de variables globales:
Archivo global.vue:
lt;scriptgt;
const serverSrc='www.baidu. com';
const token='12345678';
const hasEnter=false;
const userSite="Islas Diaoyu de China";
exportar valor predeterminado
{
userSite, //dirección de usuario
token, //identidad del token de usuario
serverSrc, // Dirección del servidor
hasEnter, //Estado de inicio de sesión del usuario
}
lt;/scriptgt;
Método de uso 1:
Haga referencia al archivo del módulo de variable global cuando sea necesario y luego obtenga el valor del parámetro de variable global a través del nombre de la variable en el archivo.
Usado en el componente text1.vue:
lt;templategt;
lt;divgt;{{ token }}lt;/divgt;
lt;/templategt;
lt;scriptgt;
importar global_ desde '../../components/Global'//módulo de referencia en
exportar valor predeterminado {
nombre: 'texto',
datos () {
devolver {
token: global_. , //Asigne variables globales a los datos, o puede usar global_.token directamente
}
}
}
lt; /scriptgt;
lt;style lang="scss" Scopedgt;
lt;/stylegt;
Método de uso 2:
En el archivo main.js en la entrada del programa, monte el archivo Global.vue anterior en Vue.prototype.
importar global_ desde './components/Global'//archivo de referencia
Vue.prototype.GLOBAL = global_//Montado en la instancia de Vue
Luego , no es necesario hacer referencia al archivo del módulo Global.vue en todo el proyecto. Puede acceder directamente a las variables globales definidas en el archivo Global a través de esto.
text2.vue:
lt;templategt;
lt;divgt;{{ token }}lt;/divgt;
lt;/templategt;
lt;scriptgt;
exportar valor predeterminado {
nombre: 'texto',
datos () {
return {
token: this.GLOBAL.token, //Acceda a las variables globales directamente a través de this.
}
}
}
lt;/scriptgt;
lt;style lang="scss "scopedgt;
lt;/stylegt;
Vuex también puede establecer variables globales:
Use vuex para almacenar variables globales. Hay muchas cosas aquí y son relativamente Es un poco más complicado Los amigos que estén interesados pueden verificar la información ellos mismos y jugar con ella.
Definir funciones globales
Principio
Crear. un nuevo archivo de módulo y luego, en main.js, monte la función en la instancia de Vue a través de Vue.prototype y ejecute la función a través de este nombre de función.
1. Escriba funciones directamente en main.js
Las funciones simples se pueden escribir directamente en main.js
Vue.prototype.changeData = function (){ //changeData es el nombre de la función
alert('ejecutado exitosamente');
}
Llamar al componente:
this. changeData(); // Ejecute la función directamente a través de esto
2. Escriba un archivo de módulo y móntelo en main.js.
archivo base.js, la ubicación del archivo se puede colocar en el mismo nivel que main.js para una fácil referencia
exports.install = function (Vue, opciones) {
Vue.prototype.text1 = función (){//Función global 1
alerta('Ejecución exitosa 1'); > Vue.prototipo.text2 = función (){//Función global 2
alerta('Ejecución exitosa 2');
archivo de entrada main.js:
importar base desde './base'//referencia
Vue.use(base); // tratar funciones globales como complementos Registrarse
Llamar al componente:
this.text1();
this.text2();
Palabras posteriores
p>
Lo anterior es cómo definir variables globales y funciones globales. Las variables globales y funciones globales aquí no se limitan a proyectos vue. vue-cli usa webpack para otros. Desarrollo modular, define variables globales. Las rutinas de las funciones son básicamente las mismas. Lo anterior trata solo sobre variables globales y funciones globales. Espero que leer este artículo pueda brindarle alguna ayuda.