tauhidul0821/todo-list-vue-with-vuex

Todo List Vue with Vuex

project view

vueX everything in 3 photo

another way to call getters & action , without mapAction,mapGetter,mapMutation

      this.$store.dispatch('updatedTodo',updTodo)
      
      deleteTodo(id){
        this.$store.dispatch('deleteTodo',id)
      }
    
     getAllTodos(){
        return this.$store.getters['allTodos']
     }
    
    this.$store.dispatch('fetchTodos');

here is full file for call vuex without map function

<template>
  <div>
    <h4></h4>
    <AddTodo />
    <FilterTodos />

    <div class="legend">
      <span>Double click to mark as complete</span>
      <span> <span class="incomplete-box"></span> = Incomplete </span>
      <span> <span class="complete-box"></span> = complete </span>
    </div>
    <div class="todos">
      <div
        class="todo"
        v-for="todo in getAllTodos"
        :key="todo.id"
        @dblclick="onDblClick(todo)"
        :class="{'is-complete': todo.completed}"
      >
        {{ todo.title }}

        <i @click="deleteTodo(todo.id)" class="fas fa-trash-alt"></i>
      </div>
    </div>
  </div>
</template>

<script>
import AddTodo from "./AddTodo";
import FilterTodos from "./FilterTodos";
export default {
  name: "Todo",
  components:{
    AddTodo,
    FilterTodos

  },
  methods: {
    onDblClick(todo) {
      const updTodo = {
        id: todo.id,
        title: todo.title,
        completed: !todo.completed,
      };

      this.$store.dispatch('updatedTodo',updTodo)
    },
    check() {
      console.log("this is action check from component");
    },
    deleteTodo(id){
      this.$store.dispatch('deleteTodo',id)
    }

  },
  computed: {
    getAllTodos(){
      return this.$store.getters['allTodos']
    }

  },//mapGetters(["allTodos"]),//this.$store.getters['allTodos'],//
  created() {
    // this.testAction();
    // this.fetchTodos();
    this.$store.dispatch('fetchTodos');
    console.log("when load finish then call ");
  },
};
</script>

vue-router