Step 9 - Persist

Author: mdlawson

src/app.vue

@@ -27,6 +27,8 @@
 
 <script>
 
+var STORE_KEY = "todos";
+
 var filters = {
   all: (todos) => todos,
   active: (todos) => todos.filter(todo => !todo.completed),
@@ -35,11 +37,18 @@ var filters = {
 
 export default {
   data: {
-    todos: [],
+    todos: JSON.parse(localStorage.getItem(STORE_KEY) || '[]'),
     input: '',
     filter: 'all'
   },
 
+  watch: {
+    todos: {
+      handler: (todos) => localStorage.setItem(STORE_KEY, JSON.stringify(todos)),
+      deep: true
+    }
+  },
+
   computed: {
     remaining() { return filters.active(this.todos).length; },
     filtered() { return filters[this.filter](this.todos); }