Update TodoMVC example (#1227)

* move state from mutations.js to index.js

* use actions instead of committing mutations from components
pass actions/mutations only the argument they need - when it's just one

* make component apply with the style guide

* restructure actions and mutations

* complete renaming actions

examples/todomvc/components/App.vue

@@ -16,10 +16,14 @@
       <input class="toggle-all" id="toggle-all"
         type="checkbox"
         :checked="allChecked"
-        @change="toggleAll({ done: !allChecked })">
+        @change="toggleAll(!allChecked)">
       <label for="toggle-all"></label>
       <ul class="todo-list">
-        <todo v-for="(todo, index) in filteredTodos" :key="index" :todo="todo"></todo>
+        <TodoItem
+          v-for="(todo, index) in filteredTodos"
+          :key="index"
+          :todo="todo"
+        />
       </ul>
     </section>
     <!-- footer -->
@@ -45,8 +49,8 @@
 </template>
 
 <script>
-import { mapMutations } from 'vuex'
-import Todo from './Todo.vue'
+import { mapActions } from 'vuex'
+import TodoItem from './TodoItem.vue'
 
 const filters = {
   all: todos => todos,
@@ -55,7 +59,7 @@ const filters = {
 }
 
 export default {
-  components: { Todo },
+  components: { TodoItem },
   data () {
     return {
       visibility: 'all',
@@ -77,17 +81,17 @@ export default {
     }
   },
   methods: {
+    ...mapActions([
+      'toggleAll',
+      'clearCompleted'
+    ]),
     addTodo (e) {
-      var text = e.target.value
+      const text = e.target.value
       if (text.trim()) {
-        this.$store.commit('addTodo', { text })
+        this.$store.dispatch('addTodo', text)
       }
       e.target.value = ''
-    },
-    ...mapMutations([
-      'toggleAll',
-      'clearCompleted'
-    ])
+    }
   },
   filters: {
     pluralize: (n, w) => n === 1 ? w : (w + 's'),

examples/todomvc/components/Todo.vue → examples/todomvc/components/TodoItem.vue

@@ -4,9 +4,9 @@
       <input class="toggle"
         type="checkbox"
         :checked="todo.done"
-        @change="toggleTodo({ todo: todo })">
+        @change="toggleTodo(todo)">
       <label v-text="todo.text" @dblclick="editing = true"></label>
-      <button class="destroy" @click="deleteTodo({ todo: todo })"></button>
+      <button class="destroy" @click="removeTodo(todo)"></button>
     </div>
     <input class="edit"
       v-show="editing"
@@ -19,7 +19,7 @@
 </template>
 
 <script>
-import { mapMutations } from 'vuex'
+import { mapActions } from 'vuex'
 
 export default {
   name: 'Todo',
@@ -39,18 +39,16 @@ export default {
     }
   },
   methods: {
-    ...mapMutations([
+    ...mapActions([
       'editTodo',
       'toggleTodo',
-      'deleteTodo'
+      'removeTodo'
     ]),
     doneEdit (e) {
       const value = e.target.value.trim()
       const { todo } = this
       if (!value) {
-        this.deleteTodo({
-          todo
-        })
+        this.removeTodo(todo)
       } else if (this.editing) {
         this.editTodo({
           todo,

examples/todomvc/store/actions.js

@@ -0,0 +1,33 @@
+export default {
+  addTodo ({ commit }, text) {
+    commit('addTodo', {
+      text,
+      done: false
+    })
+  },
+
+  removeTodo ({ commit }, todo) {
+    commit('removeTodo', todo)
+  },
+
+  toggleTodo ({ commit }, todo) {
+    commit('editTodo', { todo, done: !todo.done })
+  },
+
+  editTodo ({ commit }, { todo, value }) {
+    commit('editTodo', { todo, text: value })
+  },
+
+  toggleAll ({ state, commit }, done) {
+    state.todos.forEach((todo) => {
+      commit('editTodo', { todo, done })
+    })
+  },
+
+  clearCompleted ({ state, commit }) {
+    state.todos.filter(todo => todo.done)
+      .forEach(todo => {
+        commit('removeTodo', todo)
+      })
+  }
+}

examples/todomvc/store/index.js

@@ -1,12 +1,16 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
-import { state, mutations } from './mutations'
+import { mutations, STORAGE_KEY } from './mutations'
+import actions from './actions'
 import plugins from './plugins'
 
 Vue.use(Vuex)
 
 export default new Vuex.Store({
-  state,
+  state: {
+    todos: JSON.parse(window.localStorage.getItem(STORAGE_KEY) || '[]')
+  },
+  actions,
   mutations,
   plugins
 })

examples/todomvc/store/mutations.js

@@ -5,37 +5,17 @@ if (navigator.userAgent.indexOf('PhantomJS') > -1) {
   window.localStorage.clear()
 }
 
-export const state = {
-  todos: JSON.parse(window.localStorage.getItem(STORAGE_KEY) || '[]')
-}
-
 export const mutations = {
-  addTodo (state, { text }) {
-    state.todos.push({
-      text,
-      done: false
-    })
+  addTodo (state, todo) {
+    state.todos.push(todo)
   },
 
-  deleteTodo (state, { todo }) {
+  removeTodo (state, todo) {
     state.todos.splice(state.todos.indexOf(todo), 1)
   },
 
-  toggleTodo (state, { todo }) {
-    todo.done = !todo.done
-  },
-
-  editTodo (state, { todo, value }) {
-    todo.text = value
-  },
-
-  toggleAll (state, { done }) {
-    state.todos.forEach((todo) => {
-      todo.done = done
-    })
-  },
-
-  clearCompleted (state) {
-    state.todos = state.todos.filter(todo => !todo.done)
+  editTodo (state, { todo, text = todo.text, done = todo.done }) {
+    todo.text = text
+    todo.done = done
   }
 }