vue3のscript setupでvuexを使用してグローバルに状態管理をする方法

javascript

本記事では、vue3にてグローバルに状態管理をする方法について紹介します。

環境はscript setupで、状態管理にはvuexを使用します。

本記事では、実際に使用できる形でコードを書いていくので、参考にしていただき使用していただけると嬉しいです!

 vuexの環境構築をする

まずは、vueの作業環境下でvuexをインストールしてください。

npm install vuex@next --save

package.jsonに、バージョン4.X.Xのvuexがインストールされていればokです。

続いて、vueのsrc配下にstoreディレクトリを作成し、その下にindex.jsを作成します。下記は初期の形で、ここに状態管理の処理を追加していきます。

import { createStore } from 'vuex'

const store = createStore({
})

export default store

ここのファイルの置き場所は任意で良いのですが、一般的にグローバルな状態管理はstoreと表現されるので、storeディレクトリを作成しています。

続いて、main.jsにstoreをマウントして、アプリ全体で使用できるようにします。

import App from './App'
import store from './store/index'

createApp(App).use(store)

これで、vuexを使用する上での初期設定は終了です。

vue3でvuexのテストをしてみる

今回はテスト的に、viewディレクトリ配下にParentPage.vueをおいて、その中にcomponent1とcomponent2を配置し、component1で行った処理をcomponent2に反映させるデモサイトを作成しようと思います。

まず、store/index.jsにstoreの処理を作成していきます。

import { createStore } from 'vuex'

const store = createStore({
  state: {
    counter: 0
  },
  mutations: {
    increment: {
      state.counter ++
    }
  }
})

ここで、stateは状態管理するプロパティとその初期値を指定します。今回だとカウンターがそれに当たります。そして、mutationsでは、プロパティに対して実行したい処理を作成します。componentなどから、”increment”メソッドを実行する(実行する方法は後述しています)ことで、その中の処理が走るようになっています。

今回だと、カウンターを増やしていきたいのでstate.counter ++で、incrementメソッドが実施されるたびにcounterが増えるように処理を書いています。また、処理中ではstate.〇〇としていますが、プロパティに対して変更処理を実施する場合にはこのように記載する必要があります。

続いて、コンポーネントを作成していきます。まずはコンポーネント1から。コンポーネント1では、ボタンを押すことでカウントを増やす処理を増やしていく処理を書いていきます。

<script setup>
import { useStore } from 'vuex'
const store = useStore()
</script>
<template>
<button @click="store.commit('increment')">counter</button>
</template>

storeを使用するために、vuexからuseStoreをインポートします。template内でクリックした時にstore.commit(‘increment’)が実行されます。store/index.js内で定義しているmutationsの中のメソッドを実行するにはcommitに引数として渡すことで実行できます。

続いて、コンポーネント2について

<script setup>
import { useStore } from 'vuex'
const store = useStore()
</script>
<template>
  <div>counter: {{store.state.count}}</div>
</template>

storeで定義したプロパティを取得するためには、上記のようにして取得できます。以上により、コンポーネントが違っても変数を共有できるようになります。

vuexのまとめ

本記事では、vuexを使用したグローバル変数の定義方法について解説しました。

グローバルな変数定義はvueを使う上で重要なスキルだと思いますので、この機会に覚えていただければと思います。

コメント

タイトルとURLをコピーしました