nuxtでvuex(store)を使ってtodoリストを作ってみました。
サンプルコードと解説とかをのっけてます。
vuexとは
下記リンク先(公式？)に詳しく書いてますが、
配列やオブジェクトなど、変数の状態変化をコンポーネントやページ間で共有できるように管理するライブラリ・・・かなと思っています。
とりあえず使ってみました🤯
使ってみる
ストアを追加して、ページから使えるようにしました。
今回はtodoアプリっぽい感じで、todoの内容を管理するストアを作ってみました。
ストア(store)の追加
export const state = () => ({
todos: []
})
export const mutations = {
setItem (state, text) {
console.log('mutations/setItem', text);
state.todos.push(text);
},
deleteItem (state, key) {
state.todos.splice(key, 1);
}
}
export const getters = {
todoList(state) {
return state.todos;
},
}
export const actions = {
add({ commit }, text) {
console.log('actions/add', text);
commit('setItem', text);
},
delete({ commit }, key) {
console.log('actions/delete', key);
commit('deleteItem', key);
},
}
storeディレクトリの配下にtodo.jsの名前で上記のストアを作成しました。
解説
state
stateには状態管理したいオブジェクトを書きます。
mutations
mutationsはstateのオブジェクトに変更を加えるメソッドを書いています。
setItemでtodoの追加、deleteItemでtodoの削除です。
第一引数のstateで状態管理しているオブジェクトにアクセスできます。
getters
gettersは他のページから状態管理しているデータにアクセスするときに使います。
今回はtodoListでtodosが取れるようになってます。
actions
actionsはストアを使うときのアクションを書いています。
追加と削除のメソッドを作ってます。commitでmutationsのメソッドに値を渡して、stateの内容を変えています。
addでsetItem、deleteでdeleteItemのmutationsメソッドを読んでいます。
ページ(page)の追加
<template lang="pug">
div.container
v-row
v-col.just(cols="8")
v-text-field(v-model="todoItem")
v-btn.primary(@click="addTodo()") add
div
v-list
v-list-item-group(v-for="(item, key) in todos")
v-list-item
v-checkbox
v-list-item-content {{item}}
v-list-item-icon
v-icon(@click="deleteTodo(key)") mdi-delete-circle
v-divider
</template>
<script>
import { mapActions, mapGetters } from 'vuex'
export default {
data() {
return {
todoItem: '',
}
},
computed: {
...mapGetters({
todos: 'todo/todoList'
}),
},
methods: {
...mapActions({
addTodoItem: 'todo/add',
deleteItem: 'todo/delete'
}),
addTodo () {
this.addTodoItem(this.todoItem);
this.todoItem = '';
},
deleteTodo (key) {
this.deleteItem(key);
},
},
mounted () {
},
}
</script>
pagesディレクトリ配下に上記のようにページを作成しました。
解説
html
pugでタグを書いていて、テキスト入力エリアとボタンがあって、入力されたら下の方に一覧表示されるようにしました。
script
data
入力したテキストが格納されるmodelを定義してます。
computed
mapGettersでtodoストアのtodoList(getter)にアクセスして、todoの一覧をtodosに関連づけています。
v-for="(item, key) in todos"
todosは上記タグのv-forのところでループして値を表示しています。
methods
addTodoで入力したテキストをtodoストアのtodosに追加してます。
deleteTodoでtodosの内容を削除しています。
動作確認
こんな感じでデータ登録すると…
こんな感じで一覧になります。ゴミ箱アイコンで削除！
同じtodoストアにアクセスしてデータを表示する機能をトップページにつけてみましたが、別ページで追加されたものが表示されています。
ストアの中身が共有されてますね💡
データ自体はメモリに持っているのでF5リロードとかすると消えますねぇー。
永続化するにはlocalstorageとか使うんだろうか…
コメント