Added Vuex

src/App.vue

@@ -1,14 +1,12 @@
 <template>
   <div id="app">
     <Header />
-    <AddTodo v-on:add-todo="addTodo"/>
-    <Todos v-bind:todos="todos" v-on:del-todo="deleteTodo" />
+    <AddTodo />
+    <Todos />
   </div>
 </template>
 
 <script>
-import uuid from 'uuid'
-
 import Header from "./components/layout/Header";
 import Todos from "./components/Todos";
 import AddTodo from "./components/AddTodo";
@@ -20,34 +18,6 @@ export default {
     Todos,
     AddTodo
   },
-  data() {
-    return {
-      todos: [
-        {
-          id: uuid.v4(),
-          name: "Что-то, что я собираюсь сделать",
-          completed: false
-        },
-        {
-          id: uuid.v4(),
-          name: "Что-то, что я уже сделал",
-          completed: true
-        }
-      ]
-    }
-  },
-  methods: {
-    deleteTodo(id) {
-      this.todos = this.todos.filter(todo => todo.id !== id);
-    },
-    addTodo(n) {
-      (n !== '' & n !== ' ') && this.todos.push({
-        id: uuid.v4(),
-        name: n,
-        completed: false
-      })
-    }
-  }
 }
 </script>
 
@@ -58,7 +28,6 @@ export default {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
-  color: ;
   margin-top: 50px;
 }
 </style>

src/components/AddTodo.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <form autocomplete="off" @submit.prevent="$emit('add-todo', inputName); inputName = '';" class="addTodo">
+    <form autocomplete="off" @submit.prevent="addTodo(inputName); inputName = '';" class="addTodo">
       <input type="text" v-model="inputName" name="title" placeholder="Название дела..." class="txtField">
       <input type="submit" value="Добавить" class="btn">
     </form>
@@ -8,14 +8,19 @@
 </template>
 
 <script>
-  export default {
-    name: "AddTodo",
-    data() {
-      return {
-        inputName: ''
-      }
+import { mapActions } from "vuex";
+
+export default {
+  name: "AddTodo",
+  data() {
+    return {
+      inputName: ''
     }
+  },
+  methods: {
+    ...mapActions(["addTodo"])
   }
+}
 </script>
 
 <style scoped>

src/components/TodoItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="todo-item" v-bind:class='{"is-complete":todo.completed}' v-on:click="markComplete">
+  <div class="todo-item" v-bind:class='{"is-complete":todo.completed}' v-on:click="$emit('toggle-complete', todo.id)">
     <p>
       {{todo.name}}
       <button @click="$emit('del-todo', todo.id)" class="delete">&#10060;</button>
@@ -8,34 +8,31 @@
 </template>
 
 <script>
+import { mapActions } from "vuex";
+
 export default {
   name: "TodoItem",
-  props: ["todo"],
-  methods: {
-    markComplete() {
-      this.todo.completed = !this.todo.completed
-    }
-  }
+  props: ["todo"]
 }
 </script>
 
 <style scoped>
-  .todo-item {
-    margin: auto;
-    text-align: left;
-    width: 400px;
-    cursor: pointer;
-    font-weight: Regular;
-  }
+.todo-item {
+  margin: auto;
+  text-align: left;
+  width: 400px;
+  cursor: pointer;
+  font-weight: Regular;
+}
 
-  .is-complete {
-    text-decoration: line-through;
-  }
+.is-complete {
+  text-decoration: line-through;
+}
 
-  .delete {
-    float: right;
-    border: none;
-    background-color: Transparent;
-    cursor: pointer;
-  }
+.delete {
+  float: right;
+  border: none;
+  background-color: Transparent;
+  cursor: pointer;
+}
 </style>

src/components/Todos.vue

@@ -1,14 +1,16 @@
 <template>
-  <draggable v-model="todos" @start="drag=true" @end="drag=false">
-    <div v-bind:key="todo.id" v-for="todo in todos">
-      <TodoItem v-bind:todo="todo" v-on:del-todo="$emit('del-todo', todo.id)" />
+  <draggable class="todos" @start="drag=true" @end="drag=false">
+    <div v-bind:key="todo.id" v-for="todo in allTodos">
+      <TodoItem v-bind:todo="todo" v-on:del-todo="delTodo(todo.id)" v-on:toggle-complete="toggleComplete(todo.id)" />
     </div>
   </draggable>
 </template>
 
 <script>
-import draggable from 'vuedraggable'
+import draggable from 'vuedraggable';
 import TodoItem from "./TodoItem.vue";
+import { mapGetters } from "vuex";
+import { mapActions } from "vuex";
 
 export default {
   name: "Todos",
@@ -16,16 +18,16 @@ export default {
     draggable,
     TodoItem
   },
-  props: ["todos"],
   methods: {
-    moveItem(from, to) {
-      this.todos.splice(to, 0, this.todos[from]);
-      this.todos[from] = null;
-    }
-  }
+    ...mapActions(["delTodo", "toggleComplete"]),
+  },
+  computed: mapGetters(["allTodos"])
 }
 </script>
 
 <style scoped>
-
+.todos {
+  width: 400px;
+  margin: auto;
+}
 </style>

src/main.js

@@ -1,8 +1,10 @@
-import Vue from 'vue'
-import App from './App.vue'
+import Vue from 'vue';
+import App from './App.vue';
+import store from './store';
 
-Vue.config.productionTip = false
+Vue.config.productionTip = false;
 
 new Vue({
+  store,
   render: h => h(App),
 }).$mount('#app')

src/store/index.js

@@ -0,0 +1,11 @@
+import Vue from "vue";
+import Vuex from "vuex";
+import todos from "./modules/todos";
+
+Vue.use(Vuex);
+
+export default new Vuex.Store({
+    modules: {
+        todos
+    }
+});

src/store/modules/todos.js

@@ -0,0 +1,59 @@
+import uuid from 'uuid'
+
+const state = {
+    todos: [
+        {
+            id: uuid.v4(),
+            name: "Что-то, что я собираюсь сделать",
+            completed: false
+        },
+        {
+            id: uuid.v4(),
+            name: "Что-то, что я уже сделал",
+            completed: true
+        }
+    ]
+};
+
+const getters = {
+    allTodos: (state) => state.todos
+};
+
+const actions = {
+    async toggleComplete({commit}, id) {
+        commit('toggleComplete', id)
+    },
+    async addTodo({commit}, name) {
+        commit('addTodo', name)
+    },
+    async delTodo({commit}, id) {
+        commit('delTodo', id)
+    }
+};
+
+const mutations = {
+    toggleComplete(state, id) {
+        state.todos.forEach(element => {
+            if (element.id == id) {
+                element.completed = !element.completed
+            }
+        });
+    },
+    addTodo(state, n) {
+        state.todos.unshift({
+            id: uuid.v4(),
+            name: n,
+            completed: false
+        });
+    },
+    delTodo(state, id) {
+        state.todos = state.todos.filter(todo => todo.id !== id);
+    }
+};
+
+export default {
+    state,
+    getters,
+    actions,
+    mutations
+};