Vuex tutorial - simple todos example

Author: hkp22

package-lock.json

@@ -9,7 +9,8 @@
   },
   "dependencies": {
     "core-js": "^2.6.5",
-    "vue": "^2.6.10"
+    "vue": "^2.6.10",
+    "vuex": "^3.1.1"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.12.0",

package.json

@@ -1,24 +1,37 @@
 <template>
   <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <h1>Todos</h1>
+    <h3>Completed: {{ completedTodos }}</h3>
+    <h3>Pending: {{ pendingTodos }}</h3>
+    <todos-list />
+    <todo-form />
   </div>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
+import { mapGetters } from "vuex";
+import TodosList from "./components/TodosList";
+import TodoForm from "./components/TodoForm";
 
 export default {
-  name: 'app',
+  name: "app",
   components: {
-    HelloWorld
+    TodosList,
+    TodoForm
+  },
+
+  computed: {
+    ...mapGetters({
+      completedTodos: "completedTodos",
+      pendingTodos: "pendingTodos"
+    })
   }
-}
+};
 </script>
 
 <style>
 #app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  font-family: "Avenir", Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;

src/App.vue

@@ -0,0 +1,28 @@
+<template>
+  <div style="width:250px; margin:5px auto;">
+    <div style="display:flex; justify-content:space-between">
+      <span :class="{completed: todo.completed}" @click="toggleTodoStatus(todo)">{{ todo.title }}</span>
+      <button @click="removeTodo(todo)">Delete</button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapActions } from "vuex";
+export default {
+  props: ["todo"],
+
+  methods: {
+    ...mapActions({
+      removeTodo: "deleteTodo",
+      toggleTodoStatus: "toggleTodoStatus"
+    })
+  }
+};
+</script>
+
+<style scoped>
+.completed {
+  text-decoration: line-through;
+}
+</style>

src/components/HelloWorld.vue

@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <input type="text" v-model="newTodoItem" />
+    <button @click="addNewTodoItem()">Submit</button>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      newTodoItem: ""
+    };
+  },
+
+  methods: {
+    addNewTodoItem() {
+      this.$store.dispatch("addNewTodo", this.newTodoItem);
+      this.newTodoItem = "";
+    }
+  }
+};
+</script>
+
+<style>
+</style>

src/components/Todo.vue

@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <todo v-for="(todo, index) in todos" :key="index" :todo="todo" />
+  </div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+import Todo from "./Todo";
+
+export default {
+  components: {
+    Todo
+  },
+
+  computed: {
+    ...mapState({
+      todos: "todos"
+    })
+  }
+};
+</script>
+
+<style>
+</style>

src/components/TodoForm.vue

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

src/components/TodosList.vue

@@ -0,0 +1,65 @@
+import Vue from "vue";
+import Vuex from 'vuex';
+
+Vue.use(Vuex);
+
+export default new Vuex.Store({
+  state: {
+    todos: [
+      {
+        title: "todo item a",
+        completed: false
+      },
+      {
+        title: "todo item b",
+        completed: false
+      },
+    ]
+  },
+
+  getters: {
+    completedTodos(state) {
+      return state.todos.filter(todo => {
+        return todo.completed === true;
+      }).length;
+    },
+
+    pendingTodos(state) {
+      return state.todos.filter(todo => {
+        return todo.completed === false;
+      }).length;
+    }
+  },
+
+  mutations: {
+    NEW_TODO(state, todoItem) {
+      state.todos.push({
+        title: todoItem,
+        completed: false
+      })
+    },
+
+    DELETE_TODO(state, todoItem) {
+      let index = state.todos.indexOf(todoItem);
+      state.todos.splice(index, 1);
+    },
+
+    TOGGLE_TODO_STATUS(state, todoItem) {
+      todoItem.completed = !todoItem.completed;
+    }
+  },
+
+  actions: {
+    addNewTodo({ commit }, todoItem) {
+      commit('NEW_TODO', todoItem);
+    },
+
+    deleteTodo({ commit }, todoItem) {
+      commit('DELETE_TODO', todoItem);
+    },
+
+    toggleTodoStatus({ commit }, todoItem) {
+      commit('TOGGLE_TODO_STATUS', todoItem);
+    }
+  }
+});