I want to make separate files for data and methods, and access them in a third file where I could just display them. There will be a lot of variables and math going on, and keeping everything in a single Vue file makes the code hard to read. That kind of 'data-store' for both variables and functions would help me keep my code clean. Thank you in advance!
Add a comment
|
1 Answer
One thing I've done in the past is put those files in my assets folder. For example, I have a static set of data in a json file I need in my component. I do the following:
<template>
<div></div>
</template>
<script>
export default {
name: 'FetchData',
data() {
return {
retrievedData: require('../assets/data.json'),
}
},
created() {
this.emitFormattedData(this.retrievedData);
}
methods: {
emitFormattedData(rawData) {
const formattedData = this.formatData(rawData);
this.$emit('fetch-products-event', formattedData);
},
formatData(rawData) {...}
}
}
You could do the same for variables by using exportable functions (I dont think you can export variables).
// helper js file
export function myImportantMathVariable() {
//return some value
}
and in your Vue file
<script>
import {myImportantMathVariable} from '../assets/helper.js';
export default {
name: 'MyAwesomeMathComponent,
data() {
return {
someProp: number
}
},
methods: {
someSuperMethod() {
return 5 + myImportantMathVariable();
}
}
}
...
4 Comments
Falithh
That: data() { return { retrievedData: require('../assets/data.json'), } }, Works very well, if it comes to display static data from JSON file, however as I am writing clicker/idle game (for learning purposes) I want to change variable values and these are changing, of course, but they are not saving (refreshing site giving me original values back). localStorage works for storing data locally, but my problem was with messy Vue file, to make everything work. Having bunch of variables, methods and whole template in single file makes work harder. With VanillaJS it was simple
Stephen Whitmore
I think it's a matter of perspective. Having everything in one .Vue file keeps all component code in one place and it treats components like a single entity instead of something split up into many pieces based on technology layer (like Angular does or working with vanilla js). I think if you're needing to change properties or data then you're going to want to look into state management - vuejs.org/v2/guide/state-management.html. While it adds complexity to your app it also gives you way more flexibility and control as an application scales.
Stephen Whitmore
To add to that, in some cases just plain old vanilla js makes the most sense. Not every situation calls for a SPA or special framework. I think people get caught up with the hype of using one that they overcomplicate it for themselves. I've done things like build image galleries in vanilla js because using Vue or React felt overkill and looking back I think it would've been.
Falithh
I have no doubts about Vanilla JS, after all (as far as I know) Vue.js (and other JS frameworks) are just written in Vanilla JS, and they're just providing us easier way to deal with some stuff. Main reason why I am using Vue for this, while it probably wouldn't be harder with Vanilla JS is because I want to, and I have to learn Vue. However, with bigger Applications it becomes bit long file. Hundreds of code lines, and since I was used to Vanilla JS where i was just importing stuff from bunch of files, it's challenging and fresh experience. Anyway, thanks for help, it helped me in some ways.