// store/index.js
import Vuex from 'vuex';

const createStore = () => {
  return new Vuex.Store({
    state: () => ({
      todos: [
        {content: 'テスト', created: '2020-04-30 17:00', state: '作業前'}, 
        {content: 'コーディング', created: '2020-04-30 16:00', state: '作業中'},
        {content: '環境構築', created: '2020-04-30 15:30', state: '完了'}
      ]
    }),
  })
}

export default createStore;

  {{ item.content }}
  {{ item.created }}
  {{ item.state }}
  削除

{{ item.content }}
{{ item.created }}
{{ item.state }}
削除

// pages/index.vue
import {mapState} from 'vuex';

export default {
  data: function() {
    return {
      content:
    }
  },
  computed: {
    ...mapState(['todos'])
  }
}

// store/index.js
mutations: {
  insert: function(state, obj) {
    var d = new Date();
    var fmt = d.getFullYear()
            + '-' + ('00' + (d.getMonth() + 1)).slice(-2)
            + '-' + ('00' + d.getDate()).slice(-2)
            + ' ' + ('00' + d.getHours()).slice(-2)
            + ':' + ('00' + d.getMinutes()).slice(-2);
    state.todos.unshift({
      content: obj.content,
      created: fmt,
      state: '作業前'
    })
  }
}

追加

追加

// pages/index.vue
methods: {
  insert: function() {
    if(this.content != ''){
      this.$store.commit('insert', {content: this.content});
      this.content = '';
    }
  }
}

// store/index.js
remove: function(state, obj) {
  for(let i = 0; i < state.todos.length; i++) {
    const ob = state.todos[i];
    if(ob.content == obj.content && ob.created == obj.created) {
      if(confirm('"' + ob.content + '"を削除しますか？')){
        state.todos.splice(i, 1);
        return;
      }
    }
  }
}

削除

// pages/index.vue
remove: function(todo) {
  this.$store.commit('remove', todo)
}

// store/index.js
option:[
  {id:0 ,label:'作業前'},
  {id:1 ,label:'作業中'},
  {id:2 ,label:'完了'}
]

// store/index.js
changeState: function(state, obj){
  for(let i = 0; i < state.todos.length; i++) {
    const ob = state.todos[i];
    if(ob.content == obj.content && ob.created == obj.created && ob.state == obj.state) {
      let nowState;
      for(let j = 0; j < state.option.length; j++){
        if(state.option[j].label == ob.state){
          nowState = state.option[j].id;
        }
      }
      nowState++;
      if(nowState >= state.option.length){
        nowState = 0;
      }
      obj.state = state.option[nowState].label
      return;
    }
  }
}

  
    {{ item.state }}
  

// pages/index.js
changeState: function(todo){
  this.$store.commit('changeState',todo)
}

// pages/index.vue
data: function() {
  return {
    content: '',
    find_state: '',
    find_flg: false
  }
},
computed: {
  ...mapState(['todos']),
  display_todos:function(){
    if(this.find_flg){
      let arr = [];
      let data = this.todos;
      data.forEach(element =>{
        if(element.state == this.find_state){
          arr.push(element);
        }
      });
      return arr;
    }else{
      return this.todos;
    }
  }
}

全て
作業前
作業中
完了

// pages/index.vue
find: function(findState){
  this.find_state = findState;
  this.find_flg = true;
},
flag_reset: function(){
  this.find_flg = false;
}