Nuxt.jsを使ってTodoリストを作ってみる

node -v

npx create-nuxt-app sample

? Project name (sample)

? Project description (My spectacular Nuxt.js project)

? Author name ()

? Choose programing language (Use arrow keys)
> JavaScript
  TypeScript

? Choose a package manager (Use arrow keys)
> Yarn
  Npm

? Choose UI framework (Use arrow keys)
> None
  Ant Design Vue
  Bootstrap Vue
  Buefy
  Bulma
  Element
  Framevuerk
  iView
  Tachyons
  Tailwind CSS
  Vuetify.js

? Choose custom server framework (Use arrow keys)
> None (Recommended)
  AdonisJs
  Express
  Fastify
  Feathers
  hapi
  Koa
  Micro

? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection)
> ( ) Axios
  ( ) Progressive Web App (PWA) Support
  ( ) DotEnv

? Choose test framework　(Use arrow keys)
> None
  Jest
  AVA

? Choose rendering mode (Use arrow keys)
> Universal (SSR)
  Single Page App

? Choose development tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
> ( ) jsconfig.json (Recommended for VS Code)
  ( ) Semantic Pull Requests

sample
├── assets/
├── components/
├── layouts/
├── middleware/
├── node_modules/
├── pages/
├── plugins/
├── static/
├── store/
├── .editconfig
├── .gitegnore
├── nuxt.config.js
├── package.json
├── package-lock.json
└── README.md

<!-- pages/index.vue -->
<template>
  <section class="container">
    <h1>Todoリスト</h1>
    <div class="addArea">
      <input type="text" name="addName" id="addName" placeholder="タスクを入力してください">
      <button id="addButton" class="button button--green">追加</button>
    </div>
    <div class="Filter">
      <button class="button button--gray is-active">全て</button>
      <button class="button button--gray">作業前</button>
      <button class="button button--gray">作業中</button>
      <button class="button button--gray">完了</button>
    </div>
    <table class="Lists">
      <thead>
        <tr>
          <th>タスク</th>
          <th>登録日時</th>
          <th>状態</th>
          <th> </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>テスト</td>
          <td>2020-04-30 17:00</td>
          <td><button class="button button--yet">作業前</button></td>
          <td><button class="button button--delete">削除</button></td>
        </tr>
      </tbody>
    </table>
  </section>
</template>
<script>
//省略
</script>
<style>
/* 省略 */
</style>

// 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;

<!-- pages/index.vue -->
<tr v-for="(item, index) in todos" :key="index">
  <td>{{ item.content }}</td>
  <td>{{ item.created }}</td>
  <td><button class="button">{{ item.state }}</button></td>
  <td><button class="button button--delete">削除</button></td>
</tr>

<tr v-for="(item, index) in todos" :key="index"></tr>

<td>{{ item.content }}</td>
<td>{{ item.created }}</td>
<td><button class="button">{{ item.state }}</button></td>
<td><button class="button button--red">削除</button></td>

// 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 -->
<input type="text" name="addName" v-model="content" placeholder="タスクを入力してください">
<button class="button button--green" @click="insert">追加</button>

<input type="text" name="addName" v-model="content" placeholder="タスクを入力してください">

<button class="button button--green" @click="insert">追加</button>

// 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 -->
<td><button class="button button--red" @click="remove(item)">削除</button></td>

// 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;
    }
  }
}

<!-- pages/index.vue -->
<td>
  <button class="button"
          v-bind:class="{
            'button--yet':item.state == '作業前',
            'button--progress':item.state == '作業中',
            'button--done':item.state == '完了'}"
          @click="changeState(item)">
    {{ item.state }}
  </button>
</td>

// 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 -->
<tr v-for="(item, index) in display_todos" :key="index"></tr>

<!-- pages/index.vue -->
<button class="button button--gray" v-bind:class="{'is-active':(!find_flg)}" @click="flag_reset">全て</button>
<button class="button button--gray" v-bind:class="{'is-active':find_flg && (find_state == '作業前')}" @click="find('作業前')">作業前</button>
<button class="button button--gray" v-bind:class="{'is-active':find_flg && (find_state == '作業中')}" @click="find('作業中')">作業中</button>
<button class="button button--gray" v-bind:class="{'is-active':find_flg && (find_state == '完了')}" @click="find('完了')">完了</button>

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