2

Estoy utilizando Vue2 (aún. Jeje) y tengo funciones que se repiten varias veces durante el ciclo de vida del sitio web; entonces pensé en si podría instanciar estas funciones para todos los componentes, como axios. Lo intenté con un objeto y lo intenté así:

import CryptoJS from 'crypto-js';

export function formData(files) {
    const form = new FormData();
    Object.keys(files).forEach(key => form.append(key, files[key]));
    return form;
}

export function sha256(file) {
    return CryptoJS.SHA256(file).toString();
}

Y así en el main.js

import Vue from 'vue'
import './plugins/axios'
import App from './App.vue'
import router from './router'
import store from './store'
import vuetify from './plugins/vuetify'

// Importar funciones propias.
import * as Security from '@/functions/Security.js'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  vuetify,
  Security,
  render: function (h) { return h(App) }
}).$mount('#app')

No me sale error, hasta que dentro de un componente intento instanciar ya sea el alias (Security) o algunas de las funciones.

Lo intenté con mixins (lo que entendí de la documentación) de la siguiente forma:

Este es mixin.js

const prueba = {
    methods: {
        hola(atributo) {
            console.log(atributo)
        }
    }
}

Este es main.js:

import Vue from 'vue'
import './plugins/axios'
import App from './App.vue'
import router from './router'
import store from './store'
import vuetify from './plugins/vuetify'

import prueba from './plugins/mixin.js'

Vue.config.productionTip = false

Vue.extend({
  mixins: prueba
})

new Vue({
  router,
  store,
  vuetify,
  render: function (h) { return h(App) }
}).$mount('#app')

Y con la siguiente función, que está dentro de un componente creado por mí, pruebo si funcionó, o no:

validate(event) {
    console.log(prueba)
    console.log($prueba)
}

Pero todo esto, me arroja error de que prueba es indefinido.

Por favor, ya he intentado de todo y aún no me funciona.

5
  • lee sobre mixim y componentizacion.. esto que preguntas, me parece que esta explicado en la documentacion...
    – gbianchi
    Commented el 13 abr. 2022 a las 0:00
  • Ya hice la prueba, pero me sigue diciendo que es indefinido.
    – Saco04
    Commented el 13 abr. 2022 a las 0:41
  • que prueba? pon todo lo que intentaste, a ver si como respuesta, ponen lo que ya intentaste.. es mas.. pone un ejemplo completo valido
    – gbianchi
    Commented el 13 abr. 2022 a las 0:47
  • Ya subí lo que intenté.
    – Saco04
    Commented el 13 abr. 2022 a las 0:55
  • Aveces coloco funciones en un script en el head del index.html en la carpeta public, para tener ahi funciones globales que puedo usar en todas partes. Se me hace util muchas veces. Commented el 22 abr. 2022 a las 1:34

1 respuesta 1

1

Esta respuesta es valida para VUE 2.

  1. Esta usando bien los mixin con la exepcion de la llamada a prueba, debes referenciar asi: this.$prueba en este caso es una funcion asi que this.$prueba()

Sin embargo cito esta advertencia de la pagina de vue https://es.vuejs.org/v2/guide/mixins.html

Utilice los mixins globales lo menos posible y con cuidado, ya que afecta a cada instancia creada de Vue, incluidos los componentes de terceros. En la mayoría de los casos, solo debe usarlos para el manejo de opciones personalizadas como se muestra en el ejemplo anterior. También es buena idea dejarlos disponibles como Plugins para evitar su uso duplicado.

  1. Otra forma de hacer esto es acceder al prototype de Vue para agregar una propiedad que sea reutilizable en todos los componentes. puede hacerlo de esta forma:

main.js

import Vue from 'vue'

Vue.prototype.$prueba = function(){
    return "hola mundo"
}

Luego en su componente

export default{
  mounted(){
     console.log( this.$prueba() )
  }
}
  1. Tambien seria posible para crear una función mas global agregarla en un <script> del index.html dentro del directorio public. de esta forma:

public > index.html

 <!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <meta name="theme-color" content="#055756" />
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong
        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
        properly without JavaScript enabled. Please enable it to
        continue.</strong
      >
    </noscript>
    <div id="app"></div>
    <script>
      function getRandomInt(min, max) {
        return Math.floor(Math.random() * (max - min)) + min;
      }
    </script>
  </body>
</html>

de esta forma ya puede usar esa funcion en toda la aplicación.

componente.vue

   console.log(getRandomInt())
     export default{
      mounted(){
        console.log(getRandomInt())
      }
    }

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.