⇨ Laravel 記事の目次はこちら

今回の記事では、Laravel に Vue を入れたプロジェクトで Vuex が使えるようにします。

⇨ Laravel に Vuex、VueRouter、Vuetify を入れる方法はこちらの記事

Vuex とは

Vuex は Vue の全てのコンポーネントで使える、共通の state（データ）、actions（関数）などを定義するところになります。

Javascript でいうところのグローバルな関数であったり、React の Redux に近いものになります。

個人的には、できるだけコンポーネントで処理は簡潔させるべきだと思っているのですが、

全てのコンポーネントで毎回同じデータを取得してしまっているときなど、

①「１回取得して使いまわした方が効率が良い」

②「全てのコンポーネントで定義しそうなもの」

を、この Vuex で記述するのが効率良いのではないかなと思っています。

Vuex を導入する

まずコマンドで Vuex をインストールします。

npm install vuex

そしたら、下記の画像のような構造で、

①js/store/index.js ファイルを作成します。

②js/store/modules/util.js ファイルを作成します。

② のファイル名は、今回はたまたま util とつけましたが、機能がわかる名前にすると良いと思います。

そしたら、それぞれのファイルに書いていきます。

index.js

import Vue from "vue";
import Vuex from "vuex";
import util from "./modules/util";

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    util,
  },
});

util.js

const getters = {};

const state = {
  text: "テキストだよおおおお",
};

const mutations = {};

const actions = {};

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

新しいファイルはこれで OK です。

そしたら、resouces/js/app.js に、store を追記します。

import vuetify from "./vuetify";
import router from "./router";
import AppComponent from "./components/AppComponent.vue"; //追記
import store from "./store/index";

const app = new Vue({
  el: "#app",
  store, //追記
  router,
  vuetify,
  components: {
    "app-component": AppComponent,
  },
});

以上です！

（app.js よくが分からない人は、⇨ こちらの記事

効果検証方法については、どこの vue ファイルでも良いのですが、

<template>
    <div>{{ $store.state.util.text }}</div>
</template>

これでさきほどの util.js に書いた state の内容が取得できれば設定は OK です。

あとは、Vuex を楽しんでください！

まとめ

いかがでしたか？

以上が、Laravel プロジェクトに、Vuex を入れる手順となります。

それでは！