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.