Sep 5, 2018 · 1 min read
Thanks for sharing — very useful :-)
If you combine it with a global instance (using Vue.prototype) it is super easy to share it between components (sorry if any code typos ;-)
Vue.prototype.$storage = new Vue({
data: {
todos: JSON.parse(localStorage.getItem('todos') || '[]')
},
watch: {
todos: {
handler(){
localStorage.setItem('todos', JSON.stringify(this.todos));
}, deep: true }
}
}
});
Vue.component('vue-list-todos', {
template: `<ul>
<li v-for="todo in todos">{{ todo.text}}</li>
</ul>`,
data(){ return {
todos: this.$storage.todos
}}
});...
