getters 函数

@@ -12,6 +12,7 @@
     <child :level="1">Hello world!</child>
     <child :level="1">Hello world!</child>
     <child :level="3">Hello world!</child>
     <child :level="3">Hello world!</child>
     <my-paragraph></my-paragraph>
     <my-paragraph></my-paragraph>
+    <getters></getters>
 </div>
 </div>
 </template>
 </template>
 
 
@@ -19,8 +20,7 @@
 import counter from './components/counter.vue'
 import counter from './components/counter.vue'
 import child from './components/child.vue'
 import child from './components/child.vue'
 import myParagraph from './components/myParagraph.vue'
 import myParagraph from './components/myParagraph.vue'
-
-import { store } from './main.js'
+import getters from './components/getters.vue'
 
 
 export default {
 export default {
     name: 'app',
     name: 'app',
@@ -31,25 +31,25 @@ export default {
     },
     },
     computed: {
     computed: {
         count() {
         count() {
-            return store.state.count
+            return this.$store.state.count
         },
         },
         isLogin() {
         isLogin() {
-          return store.state.isLogin
+          return this.$store.state.isLogin
         }
         }
     },
     },
     methods: {
     methods: {
         increment() {
         increment() {
-            store.commit('increment')
+            this.$store.commit('increment')
         },
         },
         decrement() {
         decrement() {
-            store.commit('decrement')
+            this.$store.commit('decrement')
         },
         },
         login() {
         login() {
-            store.commit('login')
+            this.$store.commit('login')
         }
         }
     },
     },
     components: {
     components: {
-        counter,child,myParagraph
+        counter,child,myParagraph,getters
     }
     }
 }
 }
 </script>
 </script>

+<template lang="html">
+    <div>
+      doneTodos: {{doneTodos}}
+    </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {}
+  },
+  computed: {
+    doneTodos (){
+      return this.$store.getters.doneTodos
+    }
+  },
+  mounted () {},
+  methods: {},
+  components: {}
+}
+</script>
+
+<style lang="css">
+</style>

@@ -8,7 +8,16 @@ const store = new Vuex.Store({
     state: {
     state: {
         count: 0,
         count: 0,
         size: 10,
         size: 10,
-        isLogin: false
+        isLogin: false,
+        todos: [
+          { id: 1, text: '...', done: true },
+          { id: 2, text: '...', done: false }
+        ]
+    },
+    getters: {
+      doneTodos: state => {
+        return state.todos.filter(todo => todo.done)
+      }
     },
     },
     mutations: {
     mutations: {
         increment: state => state.count++,
         increment: state => state.count++,