使用mapGetters 工具函数映射到局部计算属性

 {
-  "presets": [
-    ["es2015", { "modules": false }]
-  ]
+  "presets": ["es2015"],
+  "plugins": ["transform-object-rest-spread"]
 }

@@ -20,7 +20,10 @@
   "devDependencies": {
     "babel-core": "^6.0.0",
     "babel-loader": "^6.0.0",
+    "babel-plugin-transform-object-rest-spread": "^6.16.0",
+    "babel-plugin-transform-runtime": "^6.15.0",
     "babel-preset-es2015": "^6.0.0",
+    "babel-runtime": "^6.18.0",
     "cross-env": "^3.0.0",
     "css-loader": "^0.25.0",
     "file-loader": "^0.9.0",

 <template lang="html">
     <div>
       doneTodos: {{doneTodos}}
+      doneTodosCount: {{doneTodosCount}}
     </div>
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
+
 export default {
   data () {
     return {}
   },
   computed: {
-    doneTodos (){
-      return this.$store.getters.doneTodos
-    }
+    // doneTodos (){
+    //   return this.$store.getters.doneTodos
+    // },
+    // doneTodosCount (){
+    //   return this.$store.getters.doneTodosCount
+    // }
+    ...mapGetters([
+      'doneTodosCount',
+      'doneTodos'
+    ])
   },
   mounted () {},
   methods: {},

@@ -21,6 +21,9 @@ const store = new Vuex.Store({
     getters: {
         doneTodos: state => {
             return state.todos.filter(todo => todo.done)
+        },
+        doneTodosCount: (state, getters) => {
+          return getters.doneTodos.length
         }
     },
     mutations: {