(véase el final para saber por qué esto no es un duplicado de https://stackoverflow.com/questions/950087)
Javascipt + Vue + webpack + vue-loader noob... ¡tropezando con lo más simple!
Tengo App.vue
que tiene una plantilla:
<template>
<div id="app">
<login v-if="isTokenAvailable()"></login>
</div>
</template>
Declaro el método isTokenAvailable
de la forma normal para Vue dentro de methods
. Utiliza una función que escribí en un archivo js
separado:
<script>
import * as mylib from './mylib';
export default {
....
methods:{
isTokenAvailable: () => {
return mylib.myfunc();
}
}
}
</script>
mylib
empieza así:
import models from './model/models'
import axois from 'axios'
export default function() {
// functions and constants
}
Cuando ejecuto el proyecto obtengo la advertencia:
export 'myfunc' (imported as 'mylib') was not found in './mylib'
Deduzco que no estoy importando o declarando un módulo javascript correctamente... pero parece que hay tantas formas de hacerlo, sumado a la complejidad del scoping en Vue, que no estoy seguro de cual es la forma "correcta" de hacerlo?
Gracias de antemano
Why this isn't a dupe of: https://stackoverflow.com/questions/950087
No parece solucionar el problema, específicamente en el contexto de vuejs.
He intentado esto:
<script>
const mylib = require('./mylib');
...
</script>
Con la función modificada a: exports.myfunc = function()
¿Debo tener alguna otra dependencia para que esto funcione? Porque me da un error diferente:
[Vue warn]: Error in render function:
TypeError: mylib.myfunc is not a function
Digamos que quiero importar datos a un componente desde src/mylib.js
:
var test = {
foo () { console.log('foo') },
bar () { console.log('bar') },
baz () { console.log('baz') }
}
export default test
En mi archivo .Vue simplemente importé test
desde src/mylib.js
:
<script>
import test from '@/mylib'
console.log(test.foo())
...
</script>
Después de unas horas de trastear al final he conseguido algo que funciona, parcialmente contestado en un tema similar aquí: https://stackoverflow.com/questions/950087/how-do-i-include-a-javascript-file-in-another-javascript-file
PERO había una importación que estaba jodiendo el resto:
<script>
var mylib = require('./mylib');
export default {
....
mylib
exports.myfunc = () => {....}
import
El problema real en mi caso (¡que no pensé que fuera relevante!) era que mylib.js
estaba usando otras dependencias. El error resultante no parece tener nada que ver con esto, y no había ningún error de transpilación de webpack
pero de todos modos lo tenía:
import models from './model/models'
import axios from 'axios'
Esto funciona mientras no use mylib
en un componente .vue
. Sin embargo, en cuanto uso mylib
allí, aparece el error descrito en este tema.
He cambiado a
let models = require('./model/models');
let axios = require('axios');
Y todo funciona como se esperaba.
Me gusta la respuesta de Anacrust, aunque, por el hecho de que "console.log" se ejecuta dos veces, me gustaría hacer una pequeña actualización para src/mylib.js
:
let test = {
foo () { return 'foo' },
bar () { return 'bar' },
baz () { return 'baz' }
}
export default test
El resto del código sigue igual...