Vuexの階層構造を誤るとundefinedになっちゃうお話

2020-09-07
広瀬 雅季
#
Nuxt
#
#

こんにちは、広瀬です。

以前プロジェクトで地味にハマったVuexがundefinedになる現象に遭遇したので記事にします。

Nuxtを使用して説明します。

Vuexの構造

問題のVuexの構造です。

ファイル名とか変数名がいまいちなのは触れないでいただけると…

store/
 └ testStoreA/
      ├ index.js
      ├ testStoreB.js
      └ testStoreB/
           └ index.js
/* testStoreA/index.js */
export const state = () => ({
  hi: "Hi!"
})

export const getters = {
  hi(state) {
    return state.hi
  },
}

/* testStoreA/testStoreB.js */
export const state = () => ({
  helloVer1: "Hello!"
})

export const getters = {
  helloVer1(state) {
    return state.helloVer1
  },
}

/* testStoreA/testStoreB/index.js */
export const state = () => ({
  helloVer2: "Hello...?"
})

export const getters = {
  helloVer2(state) {
    return state.helloVer2
  },
}

では、index.vue を編集してそれぞれのVuexの値を表示させてみましょう。

import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters('testStoreA', ['hi']),
    ...mapGetters('testStoreA/testStoreB', ['helloVer1']),
    ...mapGetters('testStoreA/testStoreB', ['helloVer2']),
  },
  mounted() {
    console.log(this.hi)
    console.log(this.helloVer1)
    console.log(this.helloVer2)
  }
}

結果は

Hi!
undefined
Hello...?

testStoreA/index.js

testStoreA/testStoreB.jshelloVer1の値がundefinedと取得できない結果となりました。

なぜundefinedになるのか

storetestStoreA/index.jsを作成するとVuexにtestStoreAというオブジェクトが生成されます。

testStoreA/testStoreB.jsを作成するとVuexにtestStoreA/testStoreBというオブジェクトが生成されます。

testStoreA/testStoreB/index.jsを作成するとVuexにtestStoreA/testStoreBというオブジェクトが生成されます。

結果、Vuexのオブジェクトが競合してしまいundefinedとなるわけです。

もちろんmutationsを実行しても値を入れられず undefined となります。

最後に

Vuexの構造には注意して開発をする必要がありますね。今後自分も気をつけます。

株式会社グランドリームでは、AWSを駆使した開発からUI/UXデザインまで、Webアプリケーションに関するすべての要望に応えます。
まずは一度お気軽にご相談ください。

お問い合わせはこちら