Call JS function from another file in VueJS component

Question

I'm starting doing some stuff in Vue.Js. I have a localStorage.js file added to my html, and there are no problems with the file itself. If I use the browser's console I can call the functions inside of it, no matter which component is loaded in the router-view. I need to render a list of elements in a component, using data that a function inside of my js file returns, but I can't get it to work. How can I use the response from said function as data in my component, so I can loop over it with v-for? The function returns an array of objects. I tried setting up the component like this:

export default {
 name: 'lista',
 components: {
 codiceLista
 },
 data(){
 return readLocalStorage()
 }

With readLocalStorage being the function in my external file, but it says that it's not defined. Any help would be kindly appreciated. Thanks

Answer 1

simply import it:

import { readLocalStorage } from 'external/file/location'; // <- here
export default {
 name: 'lista',
 components: {
 codiceLista
 },
 data(){
 return readLocalStorage()
 },
...
}

• user16822346: Thanks for the help. I tried this, it doesn't tell me that the function isn't defined anymore, but now, it tells me that data() is not a function, even tho it's strctured like you wrote. (It compiles now, but it's a runtime error). Should I add export in front of the function declaration in the js file?
• Riza Khan: This is not valid syntax. You can add it to a property inside of the data but not return the function like you did. data() { return { myFunc: readLocalStorage }}