WebDesigner's Memorandumウェブデザイナーの備忘録

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

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

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

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

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

Nuxt.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つのデータがあります。
どこになにを書くのか覚えておきましょう。

 記述する内容備考
stateVuexの状態(変数)を記述する 
gettersstateで記述した変数のうち、外部から呼び出したいものを記述する外部から呼び出す変数はここを見れば分かるようになる
mutationsstateの値を変更する処理を記述する 
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を渡して回る必要がなくなって非常に便利になります(使いどころは考える必要がありますが)。

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね