nuxtjsでtodo アプリケーションを作成

nuxtjsでto doアプリケーションの実装

参考:nuxt Vuexストア

nuxtjsのセットアップ

$ vue init nuxt-community/starter-template <project_name>
$ cd <project_name>
$ npm install
$ npm run dev

localhost:3000にアクセスして、以下の画像が表示されたら、確認終了。

todo アプリケーションの作成

ルーティングの追加

project_path/pagesのディレクトリにindex.vueを作成します。

.
|- pages
|   |- index.vue // root
|   |- todos     // directoryを作成
|       |- index.vue  // fileを作成

pages/todos/index.vue

  <template>
    <div>
      todos
    </div>
  </template>

  <script>
  export default {}
  </script>

  <style>
  </style>

以上のようにディレクトリを作成すると動的にルーティングが作成されます。
確認のため、localhost:3000/todosにアクセスしてみると、
自動的にroutingが作成されます。

.
|- .nuxt
|   |- router.vue //記述が追加されています。

参考：nuxt ルーティング

Vuex

Vuexの追加

nuxtにはVuexがもともと入っています。
そのため、installする必要はなく、有効化のみで対応可能です。

参考: Vuex ストア

Vuexの有効化

nuxt.config.js

module.exports = {
  /*
  ** Headers of the page
  */
  head: {
    title: 'nuxt-firebase',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'Nuxt.js project' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  // ここから
  build: {
    vendor: [
      'vuex',
    ]
  },
  // ここまでを追加
  /*
  ** Customize the progress bar color
  */
  loading: { color: '#3B8070' },
  /*
  ** Build configuration
  */
  build: {
    /*
    ** Run ESLint on save
    */
    extend (config, { isDev, isClient }) {
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }
  }
}

Vuex Storeの作成

store/todos.jsファイルを追加して、storeを作成します。

store/todos.js

export const state = () => ({
  list: []
})

export const mutations = {
  add (state, text) {
    state.list.push({
      text: text,
      done: false,
      id: state.list.length + 1,
    })
  },
  remove (state, { todo }) {
    state.list.splice(state.list.indexOf(todo), 1)
  },
  toggle (state, todo) {
    todo.done = !todo.done
  }
}

View

Viewの作成

先ほどroutingで作った、pages/todos/index.vueを編集します。
removeがチュートリアルがなかったので、適当に作成。

todos/index.vue

<template>
  <ul>
    <li v-for="todo in todos" :key="todo.id">
      <input type="checkbox" :checked="todo.done" @change="toggle(todo)">
      <span :class="{ done: todo.done }">{{ todo.text }}</span>
      <button @click="removeTodo(todo)">remove</button>
    </li>
    <li><input placeholder="What needs to be done?" @keyup.enter="addTodo"></li>
  </ul>
</template>

<script>
import { mapMutations } from 'vuex';

export default {
  computed: {
    todos () { return this.$store.state.todos.list }
  },
  methods: {
    removeTodo (todo) {
      this.$store.commit('todos/remove', todo);
    },
    addTodo (e) {
      this.$store.commit('todos/add', e.target.value)
      e.target.value = ''
    },
    ...mapMutations({
      toggle: 'todos/toggle'
    })
  }
}
</script>

<style>
.done {
  text-decoration: line-through;
}
</style>

localhost:3000/todosにアクセスすると、
CSSがほぼあたっていないものが作成されます。
こんな感じ。