Build a Pokédex with Vue CLI (part 4)
This is the last part of the tutorial series to build a Pokédex in Vue with the Vue CLI. So far we built a working Pokédex existing of two pages: an overview page of all 151 pokémon, and the page with all the selected pokémon and their Pokédex entry. To achieve this, we implemented pages, routing, Vuex, and components. In this last part, we will discuss how to get the data to be persisted.
This is the overview of the whole tutorial:
But what if I reload the page?
When reloading the page your application will be reset again. This means that your list of favorite pokémon will be gone and the user has to start over again choosing his or her favorite pokémon. An explanation for this is that the Vuex store is initially empty at the start of the application because, in the end, the store is plain javascript. We can imagine that this is not the desired behavior.
When you reload the page the Vuex state should be filled again with data of the pokémon list and favorite pokémon list at startup. But where to store this data? A solution could be the local storage of your browser. Even after closing the browser the data in the local storage will still be available. The data is linked to your URL however. So if your application is hosted on a different port or URL than before you won’t have the data available anymore.
I used the npm package vuex-persistedstate to solve this problem. You can also manipulate the local storage yourself by setting and reading the local storage with localStorage.setItem(keyName, keyValue); and const data = localStorage.getItem(keyName);
The reason why I used the npm package instead of setting it myself is that the vuex-persistedstate npm package maps the local storage to the items in the state object seamlessly. I don’t need any code for getting or setting the local storage items which made my mutations cleaner and more readable.
Example of a mutation before and after implementation of the vuex-persistedstate npm package:
Lessons learned
If you know what you want to present on the page and your hands are scratching just to build something then you just start programming. That is what happened to me and after the first day, I felt good about what I achieved. However, on the second day, I had to do refactoring for the whole day because I hadn’t thought about the generic setup of the components. For me, it would be a lesson to think things through before I start programming (even though it can also be a good challenge to do the refactoring, it just takes a lot of time).
Other things people pointed out to me in a code review (which is always important and sometimes painful but helpful to become a better programmer) were the following:
- Think about where data is needed. It has no use to retrieve data already from the API when you are not already logged in.
- Let pages be ‘smart’ and their components ‘dumb’. Components should not have access to the Vuex store, but retrieve data through props from the pages. This way the logic is put in one place, the page and there is less computational overhead for the developer.
- Make everything modular where possible. Use imports and exports to keep the main.js file well-organized.
- Naming is important. This part is tricky because it is also a bit personal. Previously I named the pages ‘selectPokemon’ and ‘overviewFavoritePokemon’ but after logging in you would be redirected to the select pokemon page so it might as well be the home page. The naming is important for other developers to understand your code better and for you when you will view the code again after a long time.
- Think about usability too, let others test your application. At multiple times I thought my application was finished. Then someone told me that the login page should submit the input on pressing the enter key.
- An application is actually never finished, there is always a way to improve your application
If you guys like the application or the tutorial series let me know :) And suggestions for improvement are also welcome. By writing this article I’m learning a lot about Front-end too so if you see any errors or you want any additions to the text, please let me know.
