Nuxt.jsをはじめよう - Vuexを使ってデータを渡す

前回の記事 ではクエリパラメータやパスパラメータを使って画面間のデータの受け渡しについて紹介しました。今回は Vuex を使ってデータの受け渡しを行いたいと思います。

Vuexとは

Vuex は複数のコンポーネント間で状態を共有するために使われる状態管理のライブラリです。 Vueのコンポーネントから状態管理の部分をVuex側に寄せることで、コンポーネント間のプロパティ渡しの連鎖による複雑さを回避できます。そのために Vuex が定めた状態管理のルールに従ってコードを書く必要があります。

storeディレクトリ配下にモジュールを配置する

Nuxt.js では Vuexストアは store ディレクトリ配下にファイルを配置することで管理ができます。ここでは ./store/next.js として以下のファイルを作成するのですが、Nuxt.jsでは storeディレクトリ配下のパスがストアに名前空間を与えます。つまり next という名前空間になります。

 1export const state = () => ({
 2    pageName: ''
 3})
 4
 5export const actions = {
 6    add ({commit}, value) {
 7        commit('addPageName', value)
 8    }
 9}
10
11export const mutations = {
12    addPageName (state, value) {
13        state.pageName = value
14    }
15}

state では実際に保持される状態を定義し、mutations には state の変更処理を書きます。 また actions にはバックエンドサーバ等からデータを取得する処理に加えてミューテーションをコミットする処理を書きます。

componentからactionを呼び出す

定義された Vuex ストアを使いましょう。コンポーネント側から状態を更新するときには action を呼び出します。 以下では Go to Next のリンク押下のタイミングにて add 関数が呼び出され、そのタイミングにて next という名前空間のストアにある add actionに処理が渡されます。

これにより pageName というstateに next という文字列が格納されます。

 1<template>
 2<div>
 3  <div>Here is First Page</div>
 4  <nuxt-link to="/next" @click.native="add('next')" > Go to Next</nuxt-link>
 5</div>
 6</template>
 7
 8<script>
 9export default {
10  methods: {
11    add(value) {
12      this.$store.dispatch('next/add', value)
13    }
14  }
15}
16</script>

別のコンポーネントでStateを参照する

最後に別のコンポーネントから更新されたstateを確認します。 <template> ブロック内で $store.state.名前空間.状態名 でアクセスすることができます。

1<template>
2<div>
3    Here is Next page
4    <div>
5    {{ $store.state.next.pageName }} 
6    </div>
7</div>
8</template>

使ってみた感想

Vuex の構造や思想は Flux や Redux から影響を受けていることもあり、これらの利用経験がある人は理解がスムーズにいくでしょう。 Nuxt.js では標準で Vuex が組み込まれています。内部的に Vuex.Store のインスタンスを作成してくれているので、必要な最低限コードを書けば良い状態にしてくれているのは秀逸ですね。