ホーム
Sponserd by↑転職したい人向け、ベンチャー企業の採用動画があります

LaravelにVuexを導入する方法

⇨ Laravel 記事の目次はこちら

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

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

目次

  1. Vuex とは
  2. Vuex を導入する

Vuex とは

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

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

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

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

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

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

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

Vuex を導入する

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

npm install vuex

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

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

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

LaravelにVuexいれるときのフォルダ構成

② のファイル名は、今回はたまたま 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 を入れる手順となります。

それでは!

Laravel のオススメの本 ⇨「動かして学ぶ!Laravel 開発入門」