update todomvc example

Author: yyx990803

examples/counter-hot/vuex/store.js

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import Vuex from '../../../src'
+import Vuex from 'vuex'
 import * as getters from './getters'
 import * as actions from './actions'
 import * as mutations from './mutations'

examples/todomvc/components/App.vue

@@ -9,7 +9,7 @@
         autofocus
         autocomplete="off"
         placeholder="What needs to be done?"
-        @keyup.enter="tryAddTodo">
+        @keyup.enter="addTodo">
     </header>
     <!-- main section -->
     <section class="main" v-show="todos.length">
@@ -46,12 +46,8 @@
 </template>
 
 <script>
+import { mapActions } from 'vuex'
 import Todo from './Todo.vue'
-import {
-  addTodo,
-  toggleAll,
-  clearCompleted
-} from '../vuex/actions'
 
 const filters = {
   all: todos => todos,
@@ -61,23 +57,16 @@ const filters = {
 
 export default {
   components: { Todo },
-  vuex: {
-    getters: {
-      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)
     },
@@ -89,13 +78,17 @@ export default {
     }
   },
   methods: {
-    tryAddTodo (e) {
+    addTodo (e) {
       var text = e.target.value
       if (text.trim()) {
-        this.addTodo(text)
+        this.$store.call('addTodo', text)
       }
       e.target.value = ''
-    }
+    },
+    ...mapActions([
+      'toggleAll',
+      'clearCompleted'
+    ])
   },
   filters: {
     pluralize: (n, w) => n === 1 ? w : (w + 's'),

examples/todomvc/components/Todo.vue

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

examples/todomvc/vuex/plugins.js

@@ -2,7 +2,7 @@ import { STORAGE_KEY } from './store'
 import createLogger from '../../../src/plugins/logger'
 
 const localStoragePlugin = store => {
-  store.on('mutation', (mutation, { todos }) => {
+  store.subscribe((mutation, { todos }) => {
     localStorage.setItem(STORAGE_KEY, JSON.stringify(todos))
   })
 }

examples/todomvc/vuex/store.js

@@ -1,6 +1,7 @@
 import Vue from 'vue'
-import Vuex from '../../../src'
+import Vuex from 'vuex'
 import plugins from './plugins'
+import * as actions from './actions'
 
 Vue.use(Vuex)
 
@@ -48,6 +49,7 @@ const mutations = {
 
 export default new Vuex.Store({
   state,
+  actions,
   mutations,
   plugins
 })