Map state to component, add babel-stage-3 to enable ...spreadOperator

.babelrc

@@ -1,6 +1,7 @@
 {
   "presets": [
-    "env"
+    "env",
+    "stage-3"
   ],
   "comments": false
 }

package.json

@@ -24,14 +24,16 @@
     "src": "^1.1.2",
     "sweetalert": "^2.1.0",
     "vue": "^2.1.10",
-    "vue-router": "^3.0.1"
+    "vue-router": "^3.0.1",
+    "vuex": "^3.0.1"
   },
   "devDependencies": {
     "@vue/component-compiler-utils": "^1.0.0",
     "autoprefixer": "^6.7.2",
     "babel-core": "^6.22.1",
     "babel-eslint": "^7.1.1",
     "babel-preset-env": "^1.6.1",
+    "babel-preset-stage-3": "^6.24.1",
     "babel-register": "^6.22.0",
     "chai": "^3.5.0",
     "chalk": "^1.1.3",

src/components/ListView/_ListView.vue

@@ -31,6 +31,7 @@
   import sweetalert from 'sweetalert'
   import Todo from './Todo.vue'
   import CreateTodo from './TodoCreate.vue'
+  import { mapState } from 'vuex'
 
   // Todo: use absolute path src/ as root https://github.com/parcel-bundler/parcel/pull/850
   import { TheHeader } from '../index.js'
@@ -43,30 +44,35 @@
       TheHeader,
     },
 
-    data() {
-      return {
-        todos: [{
-          title: 'Todo A',
-          project: 'Project A',
-          done: false,
-        }, {
-          title: 'Todo B',
-          project: 'Project B',
-          done: true,
-        }, {
-          title: 'Todo C',
-          project: 'Project C',
-          done: false,
-        }, {
-          title: 'Todo D',
-          project: 'Project D',
-          done: false,
-        }],
-      }
-    },
+    /** Moved to store.js -> computed **/
+    // data() {
+    //   return {
+    //     todos: [{
+    //       title: 'Test A',
+    //       project: 'Project A',
+    //       done: false,
+    //     }, {
+    //       title: 'Test B',
+    //       project: 'Project B',
+    //       done: true,
+    //     }, {
+    //       title: 'Test C',
+    //       project: 'Project C',
+    //       done: false,
+    //     }, {
+    //       title: 'Test D',
+    //       project: 'Project D',
+    //       done: false,
+    //     }],
+    //   }
+    // },
 
     // Like methods, but are cached until dependency changes
     computed: {
+      ...mapState({
+        todos: 'todos',
+      }),
+
       counterDone () {
         return this.todos.filter(todo => todo.done).length
       },