tweak todomvc example

Author: yyx990803

examples/todomvc/components/App.vue

@@ -44,7 +44,7 @@
 </template>
 
 <script>
-import { mapActions } from 'vuex'
+import { mapMutations } from 'vuex'
 import Todo from './Todo.vue'
 
 const filters = {
@@ -79,11 +79,11 @@ export default {
     addTodo (e) {
       var text = e.target.value
       if (text.trim()) {
-        this.$store.dispatch('addTodo', { text })
+        this.$store.commit('addTodo', { text })
       }
       e.target.value = ''
     },
-    ...mapActions([
+    ...mapMutations([
       'toggleAll',
       'clearCompleted'
     ])

examples/todomvc/components/Todo.vue

@@ -19,7 +19,7 @@
 </template>
 
 <script>
-import { mapActions } from 'vuex'
+import { mapMutations } from 'vuex'
 
 export default {
   name: 'Todo',
@@ -39,7 +39,7 @@ export default {
     }
   },
   methods: {
-    ...mapActions([
+    ...mapMutations([
       'editTodo',
       'toggleTodo',
       'deleteTodo'

examples/todomvc/store/actions.js

@@ -1,55 +1,12 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
+import { state, mutations } from './mutations'
 import plugins from './plugins'
-import * as actions from './actions'
 
 Vue.use(Vuex)
 
-export const STORAGE_KEY = 'todos-vuejs'
-
-// for testing
-if (navigator.userAgent.indexOf('PhantomJS') > -1) {
-  localStorage.clear()
-}
-
-const state = {
-  todos: JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]')
-}
-
-const mutations = {
-  ADD_TODO (state, { text }) {
-    state.todos.push({
-      text,
-      done: false
-    })
-  },
-
-  DELETE_TODO (state, { todo }) {
-    state.todos.splice(state.todos.indexOf(todo), 1)
-  },
-
-  TOGGLE_TODO (state, { todo }) {
-    todo.done = !todo.done
-  },
-
-  EDIT_TODO (state, { todo, value }) {
-    todo.text = value
-  },
-
-  TOGGLE_ALL (state, { done }) {
-    state.todos.forEach((todo) => {
-      todo.done = done
-    })
-  },
-
-  CLEAR_COMPLETED (state) {
-    state.todos = state.todos.filter(todo => !todo.done)
-  }
-}
-
 export default new Vuex.Store({
   state,
-  actions,
   mutations,
   plugins
 })

examples/todomvc/store/index.js

@@ -0,0 +1,41 @@
+export const STORAGE_KEY = 'todos-vuejs'
+
+// for testing
+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
+    })
+  },
+
+  deleteTodo (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)
+  }
+}

examples/todomvc/store/mutations.js

@@ -1,9 +1,9 @@
-import { STORAGE_KEY } from './index'
+import { STORAGE_KEY } from './mutations'
 import createLogger from '../../../src/plugins/logger'
 
 const localStoragePlugin = store => {
   store.subscribe((mutation, { todos }) => {
-    localStorage.setItem(STORAGE_KEY, JSON.stringify(todos))
+    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(todos))
   })
 }