Nuxt.jsでStore（状態管理）を使いたいときの簡単な初期ファイルの書き方

Nuxt.jsというよりVuexの話ではあるんですが、Vuex単体を事細かに説明すると長くなるしややこしいので、この記事では単純にNuxtを使用した際にページごとに持たせる情報管理について”とりあえず動く”を目標にざっくり説明していきます。

Storeディレクトリって何？

このディレクトリにはVuexでいうStoreファイルを入れます。Storeファイルっていうのはまあ拡張子的にはjsファイルで、ブラウザで開いた時にページごとに持っている個別情報を処理するための処理や変数が入っている箱、みたいな感じでしょうか。

例えばHTMLのDOMに仕込んだものを取得せずとも、ページごとに持っている情報を裏側で持っておくためのファイルになります。

これを使えるようになると、Pjaxトランジション時にシームレスな変化を与える補助になったり、アプリライクなページではユーザーの操作によってStore情報が変わると同時に非同期で要素を変更できたりと色々便利なことが出来ます。

Storeファイルを作る

NuxtをインストールするとStoreディレクトリに自動で入っているレジュメには以下のように書かれています。（本文はGoogle翻訳です）

**このディレクトリは必須ではありません。使用しない場合は削除できます。**

このディレクトリには、Vuex Storeファイルが含まれています。
Vuex StoreオプションはNuxt.jsフレームワークに実装されています。

このディレクトリにファイルを作成すると、フレームワークのオプションが自動的にアクティブになります。

このドキュメントの使用法の詳細については、[ドキュメント]（https://nuxtjs.org/guide/vuex-store）をご覧ください。

Nuxt.jsのREDUMEより

ここにファイルを作ればNuxtが自動でStoreを使えるようにしてくれるみたいですね。しかも詳しい使い方が書いてあるドキュメントURLまで紹介してくれています。親切。

さて、ここに作るファイルは例えば下記のようなものになります。シンプルにページごとにid番号をStoreに持っておくようなものを書いておきま

今回ファイルの名前は「currentId.js」としましょう。

// Stateのモジュールの内容は下記のように一連の流れを登録していく
// export const state = () => ({})
// export const actions = {}
// export const mutations = {}
// export const getters = {} //任意

// 状態の初期設定。ここの値はページが表示される際にページごとに上書かれたりする。
export const state = () => ({
  pageId: 0, //任意の名前と値
})

// 状態を更新するための処理を書く。
// ここの場合stateのpageIdにdata.idを入れる、という感じ。
export const mutations = {
  setPageId (state,data) { //任意の名前
    state.pageId = data.id; //ビュー側（.vueファイル）に書くのと同じプロパティ（ここなら.id）をつける
  }
}

// mutationを動かす（コミット）させるための記述を書く。
// ここでは上述したsetPageIdを行うとだけ書いてます。実際に使う際はビュー側でこのpageIdChangeを呼び出す。
export const actions = {
  pageIdChange ({ commit ,state},data) { //任意の名前だけれど、ビュー側で使用
    commit("setPageId", data);
  }
}

Storeファイルはとりあえずこれで良いです。

ビュー側の記述（.vueファイルに書くこと）

Storeファイルを用意出来たら、最後にビュー側に記述を書きます。この記述をすることでStoreに格納した値をビューで引き出したり、ビューによってStoreに格納する値を変更したり出来ます。

// 使用するStoreファイル名を記述
const filename = 'currentId';


export default {
  computed: {
    page_id() {
      // page_idというcomputedにStoreの情報を格納
      return this.$store.state[filename].pageId;
    },
  },
  mounted:function(){
    // Storeのページ情報をこのページのものに更新
    let pageData = {
        id:1,
    }
    // currentId.jsのpageIdChangeというactionにpageDataの情報を送る。
    // これでStoreにあるpageidの情報は「1」に変わる。
    this.$store.dispatch("currentId/pageIdChange", pageData);
  }
}

Storeにあるstateの情報をビューに表示したい場合は、computedに設定した値を例えば{{page_id}}みたいに使用。stateの情報を更新したい場合はmountedに記述しているように設定したアクションに対してデータを渡します。

これで最低限Storeの情報にアクセス、更新することは出来たんじゃないかと思います。

細かい概念や説明に関してはほとんど省いていますが、まずは「動いた！」という実感が持てた方がモチベーションも上がると思うので簡単なファイル構成と記述を書かせていただきました。

とりあえず動くのを実感して、さらに詳しく知る場合にはNuxtやVuexの公式サイトをご覧ください。