はじめに
グローバル状態管理であるVuexのクイックスタートアップガイドです。
このガイドでは、Vuexを使用してシンプルなグローバルストアを設定し、コンポーネント間で状態を共有する方法を説明します。
1. Vue プロジェクトのセットアップ
まず、Vueプロジェクトを作成し、必要な依存関係をインストールします。
npm install vuex
- プロジェクトのディレクトリ構造
以下のようなディレクトリ構造を作成します。
/js
├── /components
│ ├── VuexComponentA.vue
│ └── VuexComponentB.vue
├── /pages
│ └── Index.vue
├── /store
│ └── index.js
├── app.css
├── bootstrap.js
├── app.js
3. グローバルストアの設定
/src/store/index.js に以下のコードを追加します。
import { createStore } from 'vuex';
const store = createStore({
state: {
count: 0,
},
mutations: {
increment(state) {
state.count++;
},
},
actions: {
increment(context) {
context.commit('increment');
},
},
getters: {
count: (state) => state.count,
},
});
export default store;
4. アプリケーションの初期化
/src/app.js に以下のコードを追加します。
import './bootstrap';
import '../css/app.css';
import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/vue3';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { ZiggyVue } from '../../vendor/tightenco/ziggy';
import store from "@/store/index.js";
const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
createInertiaApp({
title: (title) => `${title} - ${appName}`,
resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
setup({ el, App, props, plugin }) {
return createApp({ render: () => h(App, props) })
.use(plugin)
.use(ZiggyVue)
.use(store)
.mount(el);
},
progress: {
color: '#4B5563',
},
});
5. Vue コンポーネントの作成
以下のように、Vueコンポーネントを作成します。
/src/components/VuexComponentA.vue
<template>
<div>component A</div>
<div>countの値は{{ count }}</div>
</template>
<script setup>
import { useStore } from 'vuex';
import { computed } from 'vue';
const store = useStore();
const count = computed(() => store.state.count);
</script>
/src/components/VuexComponentB.vue
<template>
<div>component B</div>
<button @click="inc">インクリメント</button>
</template>
<script setup>
import { useStore } from 'vuex';
const store = useStore();
const inc = () => {
store.dispatch('increment');
console.log(store.state.count);
};
</script>
/src/pages/Index.vue
<script setup>
import VuexComponentA from '@/components/VuexComponentA.vue';
import VuexComponentB from '@/components/VuexComponentB.vue';
</script>
<template>
<div>Vuex test</div>
<VuexComponentA />
<VuexComponentB />
</template>
- アプリケーションのビルドと実行
npm run dev
ポイント
着目ポイントは、並列関係にあるコンポーネント , の間で値をprops, emitなどの受け渡しを行っていないにも関わらず、変数の値を共有しているということです。
グローバルなデータストアとして、利用することでpropsのバケツリレー問題を回避できます。
まとめ
このガイドでは、Vuexを使用してシンプルなグローバルストアを設定し、コンポーネント間で状態を共有する方法を説明しました。基本的なストアの設定から、コンポーネントでの状態の取得および変更方法を示しました。これを基に、より複雑なアプリケーションに対応するためにはさらなる拡張が必要になるでしょう。