En mi proyecto vue, tengo una imagen predeterminada que debería aparecer en lugares alrededor de la aplicación cuando falta una imagen o aún no se ha cargado. Tengo varios archivos de clase y llamadas de componentes que quieren usar la misma imagen.
¿Cuál es la mejor manera de crear una variable global a la que pueda acceder desde cualquier lugar? No puedo ponerlo en la tienda porque mis archivos de clase (estoy usando vuex-orm) se cargan antes de que se declare la tienda. Preferiría no ponerlo en la window porque quiero tener una variable de una sola palabra a la que pueda llamar ( defaultImg en lugar de window.my_project.globals.defaultImg ). Podría ponerlo en .env pero quiero que esto se verifique en el repositorio y lo mismo en todos los entornos, por lo que tampoco parece correcto.
¿Cuál es la mejor manera de proporcionar una cadena global simple a todos los archivos en mi proyecto vue?
¿Estás usando Vue 2 o 3? TL; El mejor enfoque DR es crear un componente.
Puede adoptar el enfoque descrito en la documentación para crear complementos:
https://vuejs.org/guide/reusability/plugins.html#introduction
Si no desea seguir la ruta intrincada de crear un archivo de complemento separado solo para almacenar una sola cadena, probablemente podría hacer algo como esto en su archivo de entrada donde inicializa la aplicación:
Vista 3 :
app.config.globalProperties.$defaultImg = '/path/to/image.png'Vista 2 :
Vue.prototype.$defaultImg = '/path/to/image.png'Y usa esto en tus plantillas como
<img :src="$defaultImage">Sin embargo, creo que la mejor y más 'Vue' forma sería crear un componente de imagen que muestre una imagen dada, o la imagen predeterminada si src es nulo:
Vue 2 y 3
<template> <img :src="srcOrDefault"> <template>API de composición de Vue 3 :
<script> const defaultImg = '/path/to/image.png' const props = defineProps({ src: String }); const srcOrDefault = computed(() => { return props.src || defaultImg }) </script>API de opciones de Vue 2 y Vue 3 :
<script> const defaultImg = '/path/to/image.png' export default { props: { src: String }, computed: { srcOrDefault() { return this.src || defaultImg } } } </script>