update store calls

Author: alexchopin

components/footer.vue

@@ -33,7 +33,7 @@ export default {
   },
   methods: {
     removeCompleted () {
-      this.$store.commit('removeCompleted', this.actives)
+      this.$store.dispatch('setTodos', this.actives)
     }
   }
 }

components/header.vue

@@ -14,7 +14,7 @@ export default {
     addTodo () {
       var value = this.todo && this.todo.trim()
       if (value) {
-        this.$store.commit('add', { title: value, completed: this.$route.params.slug === 'completed' })
+        this.$store.dispatch('addTodo', { title: value, completed: this.$route.params.slug === 'completed' })
         this.todo = ''
       }
     }

pages/_slug.vue

@@ -33,9 +33,6 @@ export default {
       titleTemplate: 'Nuxt TodoMVC : %s todos'
     }
   },
-  mounted () {
-    this.$store.commit('fetch', JSON.parse(localStorage.getItem('nuxt-todos') || '[]'))
-  },
   data () {
     return {
       editedTodo: null
@@ -60,7 +57,7 @@ export default {
   },
   methods: {
     allDone () {
-      this.$store.commit('allDone')
+      this.$store.dispatch('allDone')
     },
     editTodo (todo) {
       this.beforeEditCache = todo.title
@@ -70,19 +67,18 @@ export default {
       this.editedTodo = null
       todo.title = todo.title.trim()
       if (!todo.title) {
-        this.removeTodo(todo)
+        this.$store.dispatch('removeTodo', todo)
       }
     },
     cancelEdit (todo) {
       this.editedTodo = null
       todo.title = this.beforeEditCache
     },
     removeTodo (todo) {
-      this.$store.commit('remove', todo)
+      this.$store.dispatch('removeTodo', todo)
     },
     save () {
-      // this.$store.dispatch('saveTodos', this.todos)
-      localStorage.setItem('nuxt-todos', JSON.stringify(this.todos))
+      this.$store.dispatch('saveTodos')
     }
   },
   directives: {

store/index.js

@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
+import axios from 'axios'
 
 Vue.use(Vuex)
 
@@ -19,25 +20,42 @@ const store = new Vuex.Store({
     }
   },
   mutations: {
-    fetch (state, todos) {
+    SET_TODOS (state, todos) {
       state.todos = todos
     },
-    add (state, todo) {
+    ADD_TODO (state, todo) {
       state.todos.push(todo)
     },
-    remove (state, todo) {
+    REMOVE_TODO (state, todo) {
       var i = state.todos.indexOf(todo)
       state.todos.splice(i, 1)
     },
-    removeCompleted (state, todos) {
-      state.todos = todos
-    },
-    allDone (state) {
-      var value = state.todos.filter(todo => todo.completed).length === state.todos.length
+    FILTER_TODOS (state, value) {
       state.todos.forEach((todo) => {
         todo.completed = !value
       })
     }
+  },
+  actions: {
+    addTodo ({ commit }, todo) {
+      commit('ADD_TODO', todo)
+    },
+    setTodos ({ commit }, todos) {
+      commit('SET_TODOS', todos)
+    },
+    removeTodo ({ commit }, todo) {
+      commit('REMOVE_TODO', todo)
+    },
+    allDone ({ state, commit }) {
+      var value = state.todos.filter(todo => todo.completed).length === state.todos.length
+      commit('FILTER_TODOS', value)
+    },
+    saveTodos ({ state }) {
+      axios.put('/api/todos', { todos: state.todos })
+    },
+    nuxtServerInit ({ commit }, { req }) {
+      commit('SET_TODOS', req.session.todos || [])
+    }
   }
 })