ACCEDER A PROPIEDADES GLOBALMENTE EN VUE.JS CON PROTOTIPOS

Antes de que empieces…

Esta publicación es adecuada para desarrolladores de todas las etapas, incluidos los principiantes. Aquí hay algunas cosas que ya debería tener antes de seguir este tutorial:

Node.js versión 10.x y superior instalada. Puede verificar si lo hace ejecutando el siguiente comando en su terminal/símbolo del sistema:

|_+_|

Node.js versión 10.x y superior instalada. Puede verificar si lo hace ejecutando el siguiente comando en su terminal/símbolo del sistema:

|_+_|

Node.js versión 10.x y superior instalada. Puede verificar si lo hace ejecutando el siguiente comando en su terminal/símbolo del sistema:

|_+_|

Node.js versión 10.x y superior instalada. Puede verificar si lo hace ejecutando el siguiente comando en su terminal/símbolo del sistema:

|_+_|

Cómo nos ayudan las importaciones a acceder a los archivos

Mientras trabaja en su proyecto Vue, la forma más rápida de acceder a un nuevo componente en otro o anidado es simplemente importando el componente o recurso necesario.

Sin embargo, esto puede volverse ineficaz fácilmente, ya que tendrá que repetir las declaraciones de importación e incluso registrar componentes para cada importación (si son componentes). Afortunadamente, Vue proporciona una forma más eficiente de manejar esto para los casos en los que ha definido globalmente un objeto de datos o una solicitud HTTP entrante.

bloqueado en la aplicación de efectivo

|_+_|

Para crear una propiedad global en su aplicación Vue y luego acceder a ella a través de una declaración de propiedad en lugar de una declaración de importación, Vue proporciona una plataforma que llamamos prototipos. De esta manera, usted define la propiedad global o el objeto de datos, diciéndole a Vue que lo recuerde como tal y luego acceda a él en cualquier componente con solo una línea de código.

sintaxis prototipo

La definición de un prototipo de Vue en su archivo JavaScript principal se verá así:

|_+_|

Aquí, |_+_| es el nombre de propiedad o datos y |_+_| cadena es el valor. Con esta definición, Vue.js obtiene esta propiedad (el nombre del blog, en nuestro caso) disponible para cada instancia de Vue en todo el proyecto, incluso antes de que se cree la instancia.

los |_+_| señal

El |_+_| sign se usa en Vue.js para identificar propiedades que se pueden usar en todas las instancias disponibles en cualquier proyecto de Vue dado. Esta distinción se hizo debido a conflictos relacionados con las definiciones de nombres de propiedad y el acceso. Con |_+_| sign, existe una clara diferencia entre las propiedades y las propiedades globales disponibles para todas las instancias.

Manifestación

Para continuar con esta sección, debe haber leído esta publicación desde el principio, descargar el proyecto inicial desde el enlace anterior y abrirlo en VS Code. Para ilustrar el ejemplo de sintaxis en la sección anterior, abra su |_+_| y agregue la definición del prototipo para que todo el archivo se vea así:

|_+_|

Ahora que ha definido un nombre de propiedad, abra su componente raíz y cópielo en el bloque de código a continuación:

|_+_|

Aquí puedes ver que |_+_| El método de enlace de ciclo de vida se utilizó para validar las afirmaciones de creación de instancias sobre los prototipos de Vue. Si ejecuta la aplicación en su servidor de desarrollo, verá el nombre guardado (LogRocket) que se muestra en la consola de su navegador.

Algunos casos de uso de prototipos de Vue

Una gran cantidad de valores de datos, propiedades y utilidades, como los recursos HTTP, se pueden convertir en propiedades globales con los prototipos de Vue. En esta sección, presentaré algunos de ellos.

la cadena javascript contiene expresiones regulares

Funciones como prototipos

Vue.js le permite agregar no solo propiedades, sino también métodos como prototipos. Con eso, cada instancia en la que se usa el prototipo obtiene acceso a la lógica configurada en la definición del prototipo.

Esto incluye el acceso al uso de |_+_| para acceder a datos, propiedades calculadas e incluso otros métodos dentro de cualquier instancia de Vue en el proyecto. Un ejemplo rápido puede ser usar una función de inversión de cadena. En tu |_+_| archivo, agregue el nuevo prototipo debajo del anterior:

|_+_|

Copie el bloque de código a continuación en su |_+_| expediente:

|_+_|

Aquí, el gancho de ciclo de vida creado se usó para registrar |_+_| y si ejecuta su aplicación en el servidor de desarrollo, verá que LogRocket se imprime al revés.

Prototipos para importaciones

Si su aplicación tiene comunicaciones con una tercera API, normalmente tendrá que importar Axios en cada componente que desee hacer un |_+_| solicitud de. Aquí hay una ilustración rápida: abra una nueva terminal en su aplicación VS Code e instale Axios:

|_+_|

Ahora, dirígete a tu |_+_| archivo en el que desea hacer un |_+_| solicitud, y copie este bloque de código dentro:

reddit.com/r/mmastreams

|_+_|

Notará que para cada componente del que desee realizar una solicitud de obtención, deberá repetir esta declaración de importación. Para resolver esto, Vue le permite usar la función de prototipo para importar una vez y en cualquier instancia de Vue en su proyecto.

Abre tu |_+_| archivo y copie el bloque de código a continuación dentro de él:

|_+_|

En tu |_+_| archivo, elimine la declaración de importación y use |_+_| alias que ya creaste, así:

|_+_|

Puedes encontrar el código completo de este tutorial. aquí en GitHub .

Conclusión

Ahora se le ha presentado el concepto de usar prototipos en Vue para hacer que las propiedades estén disponibles globalmente para todas las instancias de Vue en su proyecto. También se le mostraron las ventajas de usar prototipos, incluido, entre otros, un flujo de trabajo más eficiente. ¡Feliz pirateo!

Lectura recomendada

☞ Dockerización de una aplicación Vue

¿Por qué aprender script Java?

☞ Crear una aplicación web de chat simple usando Vue.js y Firebase

☞ Cree la aplicación web CRUD de la base de datos de Firestore usando Vue.js y Firebase

☞ Cómo implementar su aplicación Vue con Netlify

☞ Los 10 mejores consejos para nuevos desarrolladores de Vue.js

☞ Tutorial de MEVN Stack con ejemplo desde cero

☞ Uso de componentes sin procesamiento en Vue.js

☞ Acceder al DOM virtual usando funciones de renderizado en Vue JS

blog.logrocket.com