update todomvc example to use new API

Author: yyx990803

examples/todomvc/components/App.vue

@@ -9,7 +9,7 @@
         autofocus
         autocomplete="off"
         placeholder="What needs to be done?"
-        @keyup.enter="addTodo">
+        @keyup.enter="tryAddTodo">
     </header>
     <!-- main section -->
     <section class="main" v-show="todos.length">
@@ -47,6 +47,11 @@
 
 <script>
 import Todo from './Todo.vue'
+import {
+  addTodo,
+  toggleAll,
+  clearCompleted
+} from '../store/actions'
 
 const filters = {
   all: (todos) => todos,
@@ -56,16 +61,23 @@ const filters = {
 
 export default {
   components: { Todo },
+  vuex: {
+    state: {
+      todos: state => state.todos
+    },
+    actions: {
+      addTodo,
+      toggleAll,
+      clearCompleted
+    }
+  },
   data () {
     return {
       visibility: 'all',
       filters: filters
     }
   },
   computed: {
-    todos () {
-      return this.$store.state.todos
-    },
     allChecked () {
       return this.todos.every(todo => todo.done)
     },
@@ -77,18 +89,12 @@ export default {
     }
   },
   methods: {
-    addTodo (e) {
+    tryAddTodo (e) {
       var text = e.target.value
       if (text.trim()) {
-        this.$store.actions.addTodo(text)
+        this.addTodo(text)
       }
       e.target.value = ''
-    },
-    toggleAll () {
-      this.$store.actions.toggleAll()
-    },
-    clearCompleted () {
-      this.$store.actions.clearCompleted()
     }
   }
 }

examples/todomvc/components/Todo.vue

@@ -19,8 +19,21 @@
 </template>
 
 <script>
+import {
+  toggleTodo,
+  deleteTodo,
+  editTodo
+} from '../store/actions'
+
 export default {
   props: ['todo'],
+  vuex: {
+    actions: {
+      toggleTodo,
+      deleteTodo,
+      editTodo
+    }
+  },
   data () {
     return {
       editing: false
@@ -36,12 +49,6 @@ export default {
     }
   },
   methods: {
-    toggleTodo (todo) {
-      this.$store.actions.toggleTodo(todo)
-    },
-    deleteTodo (todo) {
-      this.$store.actions.deleteTodo(todo)
-    },
     doneEdit (e) {
       const value = e.target.value.trim()
       if (!value) {

examples/todomvc/store/actions.js

@@ -1,8 +1,10 @@
-export default {
-  addTodo: 'ADD_TODO',
-  deleteTodo: 'DELETE_TODO',
-  toggleTodo: 'TOGGLE_TODO',
-  editTodo: 'EDIT_TODO',
-  toggleAll: 'TOGGLE_ALL',
-  clearCompleted: 'CLEAR_COMPLETED'
+export const addTodo = makeAction('ADD_TODO')
+export const deleteTodo = makeAction('DELETE_TODO')
+export const toggleTodo = makeAction('TOGGLE_TODO')
+export const editTodo = makeAction('EDIT_TODO')
+export const toggleAll = makeAction('TOGGLE_ALL')
+export const clearCompleted = makeAction('CLEAR_COMPLETED')
+
+function makeAction (type) {
+  return ({ dispatch }, ...args) => dispatch(type, ...args)
 }

examples/todomvc/store/index.js

@@ -1,6 +1,5 @@
 import Vue from 'vue'
 import Vuex from '../../../src'
-import actions from './actions'
 import mutations from './mutations'
 import middlewares from './middlewares'
 
@@ -13,7 +12,6 @@ const state = {
 
 export default new Vuex.Store({
   state,
-  actions,
   mutations,
   middlewares
 })