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がほぼあたっていないものが作成されます。
こんな感じ。