Laravel-Vue構成で Vuexをセットアップしてみた【 Laravel Mix 】｜ProgLearn｜エンジニアのためのプログラミング情報メディア

みなさん、こんにちは、どんぶラッコです。

今日は Laravel の上に Vue.js を乗っける構成の時の Vuexの構築手順について解説していきます

どんぶラッコ

といっても、普段の構築方法と変わらないんだけどね。
今回は Vuex3 です。安定版が出たらVuex4の解説もするよー

グランくん

今回はモジュールモードで構築していくよ！

インストール & 構築

まずは vuex をインストールします

npm install vuex --save
# または
yarn add vuex

この記事を執筆している時点でのversion3最新系は 3.6.0 です。

もし同じバージョンをインストールしたい場合は @version でバージョン指定をしてあげてください。

npm install vuex@3.6.0 --save

どんぶラッコ

現行の最新バージョンが何かは↓のサイトで確認しておこう！

インストールが完了したら、早速ストアを構築していきましょう！

ストアは /resources/js ディレクトリ内に Store というディレクトリを作成し、構築していきます。

どんぶラッコ

ディレクトリ名は Store でも store でもOKです。ここら辺は好みです。私は今回Jetstreamで生成されるディレクトリの命名規則に合わせて Storeとしました。

まずは、モジュールを作成します。今回は sample.js とします。このファイル名は自由にカスタマイズしてください。(本に関係があるデータだけを格納するモジュールなら books.js など)

早速、/resouces/js/Store/sample.js を作成しましょう。 state, getters, mutations, actions の細かい説明は省きます。公式サイトをご確認ください。

import axios from 'axios'

const state = {
  sample: 'サンプル'
}

const getters = {
  sampleText (state) {
    return state.sample + 'のテキストです'
  }
}

const mutations = {
  setSample (state, { id, val }) {
    state.sample = val
  }
}

const actions = {
  async show ({ commit }, id) {
    // API通信する場合 axiosを使おう
    const res = await axios.get({API_URL})
    commit('setSample', res.data)
  }
}

export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions
}

namespaced: true をつけることで、モジュール内の名前空間を登録することができます。次で作業する index.js でマージするために必要な1行なので書き忘れないようにしましょう！

続いて、 index.js を作成します。 /resouces/js/Store/index.js


import Vue from 'vue'
import Vuex from 'vuex'
import sample from './sample'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    sample
  }
})

ここまでできたら、最後に作成した index.js を Vue.jsに適用させます。

/resources/js/app.js に追記しましょう。

import Vue from 'vue'

// 中略

import store from './Store/index' // 追記

// 中略

const app = document.getElementById('app')

new Vue({
  render: (h) =>
    h(InertiaApp, {
      props: {
        initialPage: JSON.parse(app.dataset.page),
        resolveComponent: (name) => require(`./Pages/${name}`).default
      }
    }),
  store, // 追記
}).$mount(app)

これで完了です！

あとはVueのコンポーネント内で呼び出せればOK。

例として、 state と getters を呼び出す処理を書いてみましょう。

<template>
  <div>
    <!-- 省略 -->
    <p> {{ sample }} </p>
    <p> {{ sampleText }} </p>
  </div>
</template>
<script>
import { mapState, mapGetters } from 'vuex'
const MinuteItemsRepository = RepositoryFactory.get('minute-items')

export default {
  // 中略
  computed: {
    ...mapState('sample', {
      sample: state => state.sample
    }),
  },
  // 中略
}
</script>

以上、作り方でした！簡単でしたね！

みなさんもセットアップしてみましょう♪