Nuxt.jsでVuexストア連携を行う方法｜Nuxt.jsの基本

Vue.jsでは、現在の状態を管理するためにサイト全体で使えるVuexという仕組みがあります。

イメージとしてはグローバル変数のような存在で、全コンポーネントどこからでも参照・書き換えができます。

Nuxt.jsではこのVuexがデフォルトでインストールされているのですぐに利用できるのと、使い方がVue.js単体のときと少し違ってきます。
今回はそのVuexについてまとめておきます。

Nuxt.jsの概要やセットアップに関しては過去に記事にしているので、そちらをご覧ください。

Webrandum

Nuxt.jsの基本と最初のセットアップ「プロジェクトの作成と起動をするまでの流れ」

https://webrandum.net/nuxt-setup

最近Nuxt.jsをガッツリ触ることが多くなってきたので、理解を深めるためにもまとめていきます。Nuxt.jsとはNuxt.jsが生まれた経緯もともとNuxt.jsは、Reactのフレームワークとして開発されたNext.jsにインスパイアされて開発されました。NuxtとNextで名前が1文字違いとややこしいのですが、Vue.jsとReactで別のものなので検索結果でたまに紛れて出てきたときに惑わされないように注意しましょう。最初はVue.jsのサーバーサイドレンダリングを支援する目的で開発されていましたが、いまでは機能が追加されていき、かなり高機能になって...

Vuexの概要

Vuexは先ほども説明した通り、サイトの状態を管理するための仕組みです。

Vuex は Vue.js アプリケーションのための状態管理パターン + ライブラリです。
これは予測可能な方法によってのみ状態の変異を行うというルールを保証し、アプリケーション内の全てのコンポーネントのための集中型のストアとして機能します。
Vuex とは何か？ | Vuex

Vue.jsではコンポーネント間のやり取りにpropsと$emitを使用します。

これだと、サイト全体で使うような情報はコンポーネントすべてに、このやり取りを記述して渡して回る必要があります。
Vuexを使えば、どのコンポーネントからでも参照・変更ができます。

「現在ログイン中かどうか」などのサイト全体で使いそうな情報は、Vuexで持っておくと便利です。

Vuexの利用は推奨されない？

なんでもかんでもVuexで管理しようとすると、今度は意図しない動作を生む可能性もあります。
特定のコンポーネントでVuexの変更をすると、全然関係ない別の場所の状態まで一緒に変わってしまうなんてことが起きてしまいます。

そうならないためにも、Vuexの利用は最低限が推奨されます。

Nuxt.jsのVuex使い方

Modules Modeで記述する

Vuexには「Modules Mode（モジュールモード）」と「Classic Mode（クラシックモード）」の2つの書き方があり、Classic ModeはNuxt.js 3以降は使えず、2.4以降で警告メッセージが表示されます。

そのため、「Modules Mode」を使うようにしましょう。

それぞれの違いですが、Modules Modeではstoreフォルダに複数の.jsファイルを作成します。
対するClassic Modeでは、storeフォルダにindex.jsを作成して、そこにすべて記述していきます。

下記いずれかの場合に、Modules Modeを使っていると判定されます。

index.jsがstoreオブジェクトをexportしていない
index.jsがそもそも存在していない場合

もともと、大規模なアプリケーションではClassic Modeだと管理がしにくいため、ファイル分割して管理できる方法としてModules Modeがありましたが、現在はちゃんと分割して管理することが推奨されるようになりました。

今回の記事では「Modules Mode」を前提に書いていきます。

基本の構成

storeフォルダ内に置いた.jsファイルが、ファイル名の名前を持つモジュールとして自動で登録されていきます。
index.jsの場合はグローバルに登録されます。

.jsファイルの中身は下記になります。

export const state = () => ({
  変数名: 初期値,
  変数名: 初期値
})

export const getters = {
  // stateの状態を外部で取り出すときに使用する
  変数名: state => state.変数名
}

export const mutations = {
  ミューテーション関数名(state, 引数){
    // ここでstate（ストアの状態）を変更する
    state.変数名 = 値
  }
}

export const actions = {
  async アクション関数名({ commit }){
    // ここでミューテーションを呼び出し、外部とのAPI通信や非同期処理も行う
    commit('ミューテーション関数名', 引数)
  }
}

「state（ステート）」「getters（ゲッター）」「mutations（ミューテーション）」「actions（アクション）」という4つのデータがあります。
どこになにを書くのか覚えておきましょう。

	記述する内容	備考
state	Vuexの状態（変数）を記述する
getters	stateで記述した変数のうち、外部から呼び出したいものを記述する	外部から呼び出す変数はここを見れば分かるようになる
mutations	stateの値を変更する処理を記述する
actions	外部とのやり取りや、mutationsの呼び出しを行う	外部から呼び出す関数はここを見れば分かるようになる

vueファイルでVuexの呼び出し

.vueファイル内で先ほど作成したVuexを呼び出したいときは、gettersの場合は「$store.getters['ファイル名/変数名']」で呼び出します。

index.jsに記述している場合は「$store.getters['変数名']」という風に直接変数名を書いて呼び出します。

actionsの場合は「$store.dispatch('ファイル名/変数名')」で呼び出します。

具体的な実装

実際に実装するとどのようになるのか、具体例を載せておきます。
今回はログイン状態を管理するため、「store」フォルダ内に「login.js」を作成してその中に記述します。

import axios from 'axios'

export const state = () => ({
  isStatus: false,
})

export const getters = {
  // stateの状態を外部で取り出すときに使用する
  isStatus: state => state.isStatus
}

export const mutations = {
  setStatus(state, isLogin){
    // ここでstate（ストアの状態）を変更する
    state.isStatus = isLogin
  }
}

export const actions = {
  async login({ commit }){
    // ここでミューテーションを呼び出し、外部とのAPI通信や非同期処理も行う
    const response = await axios.get('https://example.com/login')
    if(response){
      commit('setStatus', true)
    }
  }
}

あとは.vueファイルから呼び出します。

<template>
  <div>
    <p>ログイン状態： {{$store.getters['login/isStatus']}}</p>
    <button @click="$store.dispatch('login/login')">ログインする</button>
  </div>
</template>

どこで何をしているのかの把握が、最初は慣れないかもしれませんが、バケツリレーのようにpropsと$emitを渡して回る必要がなくなって非常に便利になります（使いどころは考える必要がありますが）。