[Vuejs]-How do I add localstorage to my to-do vue.js?

0👍

I have been using the vue-ls package in all of my projects for local storage access and it is really easy to use.

On the the other hand, you could just access the local storage directly with the native JavaScript APIs for LocalStorage.

0👍

This is not that easy to implement with one line or two lines of code with your current implementation.

I noticed you’re…

  • not sing vuex
  • passing list as a prop
  • modifying(mutating) the prop

Using vuex moved the data into a separate global store, where data can be accessed and changes can be made from any component, without the need to pass data from parent.There’s a nit of a learning curve when getting started with it, but you may find it helpful. It also allows easily adding a local storage implementation after any mutation through a few lines of code, or use of a library.

The problem with passing a prop is that if the data changes in the parent, the change is pushed to the child, effectively destroying your modified version. This would require the component owning the data to make the changes and pass them to the children, which means that each change should $emit a call, which should then be handled by the data owner. Then the data owner will have tom implement loading the data from localstorage on or before mount, and update after each change. As you can see, that will require some extensive changes to your structure, which is why vuex is often preferred.

Leave a comment