[Nuxt.js]nuxtでvuexを使ってみた

nuxt.jsjavascript

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とか使うんだろうか…

github

コメント

タイトルとURLをコピーしました