Update 2017-08-10: after post this article on /r/vue, one person commented that we don’t need to pass the context since the function will refer to the context where it is called so now in the end of the article we’ll have an even cleaner way to organize our files!
Before we see an alternative way to organize our vue files/components, I must say although I believe it’s a better approach, in fact, there aren’t right or wrong way, we should follow the way we feel more comfortable to work with.
The following piece of code was extracted from the rss-reader project.
First, we’ll see the original file, and after, the proposed way to organize it.
The mental process
- Put all functions in the bottom of the file.
- When a function needs to access
this(the current context), we should pass it as the last parameter to our functions.
ctxparameter you will see is an abbreviation to
Reasons to change
- Better way to visualize all methods we have in the file.
- Easier way to extract a function to another file if/when necessary.
- More “functional” style (!?).
Let’s see and compare the traditional approach with the suggested/alternative one.
Better and cleaner approach
Which one do you prefer? Why? Share your thoughts with us :)