0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Last updated at Posted at 2024-06-22

はじめに

グローバル状態管理であるVuexのクイックスタートアップガイドです。
このガイドでは、Vuexを使用してシンプルなグローバルストアを設定し、コンポーネント間で状態を共有する方法を説明します。

1. Vue プロジェクトのセットアップ

まず、Vueプロジェクトを作成し、必要な依存関係をインストールします。

npm install vuex
  1. プロジェクトのディレクトリ構造
    以下のようなディレクトリ構造を作成します。
/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>

  1. アプリケーションのビルドと実行
npm run dev

ポイント

着目ポイントは、並列関係にあるコンポーネント , の間で値をprops, emitなどの受け渡しを行っていないにも関わらず、変数の値を共有しているということです。
グローバルなデータストアとして、利用することでpropsのバケツリレー問題を回避できます。

まとめ

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?