Nuxt.jsを使ってみる

2020/04/06

参考：nuxtjsでtodo アプリケーションを作成 - Qiita
ま、内容自体はほぼ焼き直しだけど、自分の解釈を加えるって感じ。環境はてきとうなArchLinuxだよ。

まずは環境構築。

# pacman -S nodejs npm
# npm install -g vue @vue/cli @vue/cli-init

プロジェクトの作成。

$ vue init nuxt-community/starter-template todos

nuxt-community/starter-templateはテンプレート名。nuxt-community/starter-template: DEPRECATED: use create-nuxt-app insteadがネタ元か？templateとして使えるリポジトリを指定すれば良いのだろうか。このtemplateはDeprecatedらしいので今やるならリンクが張られているnuxt/create-nuxt-appをどうにかして使うのが良いのかな。

$ cd todos && npm install && npm run dev

起動完了したら、http://localhost:3000にアクセスしてそれっぽい画面が出ればおｋ。今後はソースを編集すると自動でリロードされるっぽい。

つぎ。ルーティングの追加。pages以下にディレクトリを作成すれば、それがそのままルーティングの設定になる。

$ mkdir pages/todos
$ vi pages/todos/index.vue

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

<script>
export default {}
</script>

<style>
</style>

そのままhttp://localhost:3000/todosにアクセスすればpages/todos/index.vueの内容が見れる。

さて、Vuexの話。まずは有効化。nuxt.config.jsのhead:の次に以下の記述を追加。

$ vi nuxt.config.js

  build: {
    vendor: [
      'vuex',
    ]
  },

storeの作成。

$ vi 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
  }
}

ところでVuexとかStoreとかってなんなのだ。

Vuexは状態管理パターン+ライブラリとかいう記述が公式サイトにある。ここでの状態管理とは、ページ上の見た目（内容）・状態・アクション（それぞれView, State, Actions）の管理のことのようだ。単純な場合は利用しなくても良いけれど、複数のViewがStateを共有したりとか、異なるViewのActionsから同一のStateを変更したりとかすると、脳みそで管理するのはしんどいので、使ってくれという事みたい。

Storeは、VuexでのStateを保持するためのコンテナらしい。これはstateとmutationsから成っている。mutationsは英単語としての意味は「変化」であり、これを使って状態を変更する。

最後に、index.vueから機能を利用するように変更する。

$ vi pages/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 }"></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>

mapMutationsを使っている意味はよくわからない。

toggle (todo) {
  this.$store.commit('todos/toggle', todo);
}

でも意図した動作はするのだけど…何か意味があるんかな？

このままだとremoveがどのボタン押しても最新のやつからしか削除されないのでつらい。store/todos.jsの13行目にある{ todo }をtodoにすれば、押したものから削除されるが、寧ろ波括弧でくくったこの記述はどんなときに使うのだろう？VuexのMutationsについてのガイドを見ると、複数のデータを渡したい場合には、オブジェクトにして送れというような内容が書かれている。あんまり気にしないで良さそうかな。

以上。てきとうにイジればそれっぽく使える気配がしてきた。Node.js+ExpressでWebアプリを作って遊んでいたのだけど、それを作り直してみようかな？と思ったりもする。それか、まるっきり別のものを作ってみるのも良いかもね。
何にしろ、ろくすっぽ勉強せず取り敢えず触ってみるのは、手探りつらいってのもあるけど、やっぱり楽しいね。