LaravelにVuexを導入する方法
いつもご利用ありがとうございます。
この記事には広告が掲載されており、その広告費によって運営しています。
今回の記事では、Laravel に Vue を入れたプロジェクトで Vuex が使えるようにします。
⇨ Laravel に Vuex、VueRouter、Vuetify を入れる方法はこちらの記事
Vuex とは
Vuex は Vue の全てのコンポーネントで使える、共通の state(データ)、actions(関数)などを定義するところになります。
Javascript でいうところのグローバルな関数であったり、React の Redux に近いものになります。
個人的には、できるだけコンポーネン トで処理は簡潔させるべきだと思っているのですが、
全てのコンポーネントで毎回同じデータを取得してしまっているときなど、
①「1回取得して使いまわした方が効率が良い」
②「全てのコンポーネントで定義しそうなもの」
を、この 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 を入れる手順となります。
それでは!