Vue.js の Vuex とは何ですか? Vuexの使い方は？

Vue.js では、Vuex は状態管理パターンです。これはアプリケーション内の共有状態を管理するのに役立ち、コードの保守性と拡張性が向上します。この記事では、Vuex の概念と使用法を詳しく説明し、関連するコードサンプルをいくつか紹介します。

ここに画像の説明を挿入

Vuexとは何ですか？

Vuex は、Vue.js アプリケーション専用に設計された状態管理ライブラリです。簡単に言えば、すべてのコンポーネントの状態を保存するための集中ストレージメカニズムを提供し、これらの状態を管理および変更するためのいくつかのツールを提供します。

Vuex の中心的な概念には次のものが含まれます。

state : アプリケーションの状態を保存します。これにはを介してthis.$store.stateアクセス。
getter : state から何らかの状態を導出するために使用され、を介してthis.$store.gettersアクセス。
mutation : 状態を変更する唯一の方法であり、によってthis.$store.commit呼び出す。
action : ミューテーションに似ていますが、非同期操作の処理に使用でき、によってthis.$store.dispatch呼び出すこと。
module : ストアをモジュール構造に分割します。各モジュールは独自の状態、ゲッター、ミューテーション、アクションを持つことができます。

Vuexの使い方は？

以下は、Vue.js で Vuex を使用する方法を示す簡単な例です。

Vuex をインストールする

まず、Vuex をインストールする必要があります。npm 経由でインストールできます。

npm install vuex --save

ストアを作成する

次に、ストアを作成する必要があります。src ディレクトリの下に新しいフォルダーストアを作成し、このフォルダーの下にindex.js という名前のファイルを作成してストアを定義します。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export const store = new Vuex.Store({
    
    
  state: {
    
    
    count: 0
  },
  mutations: {
    
    
    increment(state) {
    
    
      state.count++
    },
    decrement(state) {
    
    
      state.count--
    }
  },
  actions: {
    
    
    increment(context) {
    
    
      context.commit('increment')
    },
    decrement(context) {
    
    
      context.commit('decrement')
    }
  },
  getters: {
    
    
    getCount: state => state.count
  }
})

上記のコードでは、最初に Vue と Vuex を導入しました。次に、新しい Vuex.Store インスタンスを作成し、状態、ミューテーション、アクション、ゲッターを定義します。状態にはアプリケーションの状態が含まれ、状態を変更するメソッドはミューテーションで定義され、非同期操作はアクションで定義され、状態から派生した状態はゲッターで定義されます。

ストアを注入する

Vue.js アプリケーションでは、ストアを挿入する必要があります。main.js ファイルでインジェクションを実行できます。

import Vue from 'vue'
import App from './App.vue'
import {
    
     store } from './store'

new Vue({
    
    
  el: '#app',
  store,
  render: h => h(App)
})

上記のコードでは、最初に Vue コンポーネントと App コンポーネントを導入しました。次に、ストアをインポートし、Vue インスタンスに挿入します。

Vuexを使用する

これで、コンポーネントで Vuex を使用できるようになりました。コンポーネントではthis.$store.state、を通じて状態、this.$store.commitを通じてミューテーション、this.$store.dispatchを通じて、およびを通じてthis.$store.gettersゲッターにアクセスできます。

簡単なコンポーネントの例を次に示します。

<template>
  <div>
    <p>Count: {
   
   { count }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.getters.getCount
    }
  },
  methods: {
    increment() {
      this.$store.dispatch('increment')
    },
    decrement() {
      this.$store.dispatch('decrement')
    }
  }
}
</script>

上記のコードでは、ゲッターを通じてthis.$store.getters.getCountアクセス、this.$store.dispatch('increment')アクションを通じてアクセスして、状態の変更を実現しています。

Vuex モジュラー

アプリケーションがますます複雑になると、ストアをモジュール構造に分割する必要が生じる場合があります。各モジュールは独自の状態、ゲッター、ミューテーション、およびアクションを持つことができます。

以下は、Vuex でモジュール性を使用する方法を示す簡単な例です。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const moduleA = {
    
    
  state: {
    
    
    count: 0
  },
  mutations: {
    
    
    increment(state) {
    
    
      state.count++
    },
    decrement(state) {
    
    
      state.count--
    }
  },
  actions: {
    
    
    increment(context) {
    
    
      context.commit('increment')
    },
    decrement(context) {
    
    
      context.commit('decrement')
    }
  },
  getters: {
    
    
    getCount: state => state.count
  }
}

const moduleB = {
    
    
  state: {
    
    
    message: 'Hello, World!'
  },
  mutations: {
    
    
    setMessage(state, message) {
    
    
      state.message = message
    }
  },
  actions: {
    
    
    setMessage(context, message) {
    
    
      context.commit('setMessage', message)
    }
  },
  getters: {
    
    
    getMessage: state => state.message
  }
}

export const store = new Vuex.Store({
    
    
  modules: {
    
    
    moduleA,
    moduleB
  }
})

上記のコードでは、moduleA と moduleB の 2 つのモジュールを定義しました。各モジュールには、独自の状態、突然変異、アクション、およびゲッターが含まれています。両方のモジュールをストアに挿入します。

コンポーネントではthis.$store.state.moduleA、this.$store.state.moduleBまたはを通じてモジュールの状態にアクセスしthis.$store.commit('moduleA/increment')、this.$store.commit('moduleB/setMessage', message)またはを通じてモジュールの突然変異にアクセスし、this.$store.dispatch('moduleA/increment')またはthis.$store.dispatch('moduleB/setMessage', message)を通じてモジュールのアクションにアクセスすることで、モジュール化の管理を実現します。

要約する

Vuex は、Vue.js アプリケーションでの共有状態の管理に役立つ状態管理パターンであり、コードの保守性と拡張性を高めます。Vuex を使用する場合、ストアを作成し、ストアを挿入し、Vuex を使用して、ストアをモジュール構造に分割する必要があります。Vuex を通じて、アプリケーションの状態をより便利に管理し、コードの保守性と拡張性を向上させることができます。