update todomvc example to use store injection

Author: yyx990803

examples/todomvc/components/App.vue

@@ -46,15 +46,8 @@
 </template>
 
 <script>
-import store from '../store'
 import Todo from './Todo.vue'
 
-const {
-  addTodo,
-  toggleAll,
-  clearCompleted
-} = store.actions
-
 const filters = {
   all: (todos) => todos,
   active: (todos) => todos.filter(todo => !todo.done),
@@ -71,7 +64,7 @@ export default {
   },
   computed: {
     todos () {
-      return store.state.todos
+      return this.$store.state.todos
     },
     allChecked () {
       return this.todos.every(todo => todo.done)
@@ -87,12 +80,16 @@ export default {
     addTodo (e) {
       var text = e.target.value
       if (text.trim()) {
-        addTodo(text)
+        this.$store.actions.addTodo(text)
       }
       e.target.value = ''
     },
-    toggleAll,
-    clearCompleted
+    toggleAll () {
+      this.$store.actions.toggleAll()
+    },
+    clearCompleted () {
+      this.$store.actions.clearCompleted()
+    }
   }
 }
 </script>

examples/todomvc/components/Todo.vue

@@ -19,13 +19,6 @@
 </template>
 
 <script>
-import store from '../store'
-const {
-  toggleTodo,
-  deleteTodo,
-  editTodo
-} = store.actions
-
 export default {
   props: ['todo'],
   data () {
@@ -43,14 +36,18 @@ export default {
     }
   },
   methods: {
-    toggleTodo,
-    deleteTodo,
+    toggleTodo (todo) {
+      this.$store.actions.toggleTodo(todo)
+    },
+    deleteTodo (todo) {
+      this.$store.actions.deleteTodo(todo)
+    },
     doneEdit (e) {
-      var value = e.target.value.trim()
+      const value = e.target.value.trim()
       if (!value) {
-        deleteTodo(this.todo)
+        this.deleteTodo(this.todo)
       } else if (this.editing) {
-        editTodo(this.todo, value)
+        this.editTodo(this.todo, value)
         this.editing = false
       }
     },

examples/todomvc/main.js

@@ -1,7 +1,9 @@
 import Vue from 'vue'
+import store from './store'
 import App from './components/App.vue'
 
 new Vue({
+  store, // inject store to all children
   el: 'body',
   components: { App }
 })