なるはや Vue SPA入門：Vuex ファイル分割

Vue CLI3 で作成した SPA（Single Page Application）プロジェクト上で、段階的に Vue.js を学んで行きましょう。

目次はこちら

今回は Vuex ファイル分割編です。

前提事項

Vuex モジュール編 が完了していること。

Vuex ファイル分割

前回、store.js 内に複数のモジュールを作成しました。しかし、ある程度の規模のアプリケーションになると、モジュールが多数必要になり、store.js が肥大化してしまいます。そこで、store.js を複数のファイルに分割してみたいと思います。

以下のファイル構成に分割します。

src
├── store
│   └── modules
│       ├── counter.js
│       └── todolist
│           ├── actions.js
│           ├── getters.js
│           ├── index.js
│           └── mutations.js
└── store.js

store.js 内に記述していた、counter モジュールと todoList モジュールを別ファイルに切り出します。さらに todoList は index.js, getter.js, mutations.js, actions.js といった単位に細分化することにします。

store.js

import Vue from 'vue'
import Vuex from 'vuex'
import counter from './store/modules/counter'
import todoList from './store/modules/todolist'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    counter: counter,
    todoList: todoList,
  },
})

store/modules/counter.js

export default {
  namespaced: true,

  state: {
    count: 0,
  },
  getters: {
    double(state) {
      return state.count * 2
    },
  },
  mutations: {
    increment(state) {
      state.count++
    },
    decrement(state) {
      state.count--
    },
  },
  actions: {
    increment({ commit }) {
      commit('increment')
    },
    decrement({ commit }) {
      commit('decrement')
    },
  },
}

store/modules/todolist/index.js

import getters from './getters'
import mutations from './mutations'
import actions from './actions'

export default {
  namespaced: true,

  state: {
    todos: [],
  },
  getters,
  mutations,
  actions,
}

store/modules/todolist/getters.js

export default {
  todos(state) {
    return state.todos
  },
  nextId(state) {
    if (state.todos.length) {
      return Math.max(...state.todos.map(todo => todo.id)) + 1
    }
    return 1
  },
}

store/modules/todolist/mutations.js

export default {
  todos(state, todos) {
    state.todos = todos
  },
  remove(state, idToRemove) {
    state.todos = state.todos.filter(todo => {
      return todo.id !== idToRemove
    })
  },
  add(state, todo) {
    state.todos.push(todo)
  },
}

store/modules/todolist/actions.js

export default {
  getTodos({ commit }) {
    fetch('http://localhost:8080/todos.json')
      .then(response => response.json())
      .then(json => {
        console.log(json)
        commit('todos', json.todos)
      })
      .catch(error => console.error('Error:', error))
  },
  add({ commit, getters }, text) {
    const trimedText = text.trim()
    if (trimedText) {
      commit('add', {
        id: getters.nextId,
        text: trimedText,
      })
    }
  },
}

動作確認

カウンター、TODO リストともに以前と同様に動くか確認してください。

まとめ

今回で「なるはや Vue SPA 入門」は終了となります。

シンプルな例で、Vue.js の基本を体験できるようにしたつもりです。実際のアプリケーション開発では、バリデーションだったり、API の認証やエラーハンドリング、データの永続化等、もっと細部を作り込む必要があるとは思いますが、ここから先は実際にご自身でアプリケーションを作りながら、調べながら更に前に進んでいってください。