【Vue.js】 Vuex　クイックスタートガイド(1) #JavaScript

はじめに

グローバル状態管理である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を使用してシンプルなグローバルストアを設定し、コンポーネント間で状態を共有する方法を説明しました。基本的なストアの設定から、コンポーネントでの状態の取得および変更方法を示しました。これを基に、より複雑なアプリケーションに対応するためにはさらなる拡張が必要になるでしょう。

【Vue.js】 Vuex クイックスタートガイド(1)