ホーム > Vue > 【Vue】Vuexのstore.jsの書き方例と、ファイル分割方法
Vue

【Vue】Vuexのstore.jsの書き方例と、ファイル分割方法

いつもご利用ありがとうございます。
この記事には広告が掲載されており、その広告費によって運営しています。

目次

  1. はじめに
  2. store.js の基本的な書き方
  3. Vuex のファイルを分割する方法
  4. 表示してみて確認
  5. 分割ファイルの処理を呼び出す方法
  6. まとめ
PR

Vue.js の Vuex の store.js の書き方のサンプルと、ファイル分割する方法についてまとめました。

はじめに

Vue.js は、Vue2 と Vue3 で書き方が違うところがあり、この記事では両方とも書いています。

それぞれの環境に合った方を読んでみてください。

store.js の基本的な書き方

Vue3

import { createStore } from "vuex"

export default createStore({
  state: {
    count: 0,
  },
  mutations: {
    incrementCount(state) {
      state.count += 1
    },
    reduceCount(state) {
      state.count -= 1
    },
  },
  actions: {
    incrementCount({ commit }) {
      commit("incrementCount")
    },
  },
  getters: {},
  modules: {
    //
  },
})

Vue2

export default new Vuex.Store({
  //この中の記述は、Vue3と同じです
  state: {},
  mutations: {},
  actions: {},
  getters: {},
  modules: {},
})

ここまで記述できたら、以下の記述をして導入がうまく行っているか確認しましょう。

<template>
  <div>{{ $store.state.count }}</div>
</template>

Vuex のファイルを分割する方法

基本的に、分割した先のファイルに処理を書く。

store.js にインポートし、modules に追加するという流れとなります。

store/like.jsを作成

image1

like.js ファイルを作成しました。

分割ファイルに記述

store/like.jsに記述

const getters = {}

const state = {
  count: 0,
}

const mutations = {
  incrementCount(state) {
    state.count += 1
  },
}

const actions = {
  incrementCount({ commit }) {
    commit("incrementCount")
  },
}

export default {
  namespaced: true,
  getters,
  state,
  mutations,
  actions,
}

store.js の modules に追加する

Vue 3

import like from "./store/like"

export default createStore({
  modules: {
    like,
  },
})

Vue 2

import like from "./store/like"

export default new Vuex.Store({
  modules: {
    like,
  },
})

表示してみて確認

index.vue など

<template>
  <div>
    {{ $store.state.like.count }}
  </div>
</template>

これで表示できれば分割が完了しました。

分割ファイルの処理を呼び出す方法

actions

Vue 3

<script setup>
import { useStore } from "vuex"
const store = useStore()

const handleEvent = () => {
  store.dispatch("like/incrementCount")
}
</script>

Vue 2

<script>
export default {
  methods: {
    ...mapActions("like", ["incrementCount"]), //incrementCountという関数名でこのコンポーネント内で使用可能になる
  },
}
</script>

state

Vue3 Vue2 共通で.で繋げば大丈夫です。

<template>
  <div>
    {{ $store.state.like.count }}
  </div>
</template>

getters

Vue 3

<template>
  <div>{{ tripleCount }}</div>
</template>
<script setup>
import { useStore } from "vuex"
import { computed } from "vue"

const store = useStore()

const tripleCount = computed(() => store.getters["like/tripleCount"]) //like.jsのgettersにtripleCountという関数を書いた前提
</script>

Vue 2

<template>
  <div>{{ tripleCount }}</div>
</template>
<script>
import { mapActions, mapGetters } from "vuex"
export default {
  computed: {
    ...mapGetters("like", ["tripleCount"]), //like.jsのgettersにtripleCountという関数を書いた前提
  },
}
</script>

まとめ

以上、Vue.js の Vuex の store.js の書き方のサンプルと、ファイル分割する方法についてまとめました。

Vue 3 は CompositionAPI を使っているので、記述がだいぶ Vue 2 の頃と変わっています。

誰かの参考になれば幸いです。

フィードバックのお願い
この記事のフィードバックがありましたらYoutubeの適当な動画にコメントしていただいたり、お問い合わせからご連絡ください。