こんにちは、広瀬です。
以前プロジェクトで地味にハマった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)
}
}
結果は
testStoreA/index.js
testStoreA/testStoreB.jsのhelloVer1の値がundefinedと取得できない結果となりました。
なぜundefinedになるのか
storeにtestStoreA/index.jsを作成するとVuexにtestStoreAというオブジェクトが生成されます。
testStoreA/testStoreB.jsを作成するとVuexにtestStoreA/testStoreBというオブジェクトが生成されます。
testStoreA/testStoreB/index.jsを作成するとVuexにtestStoreA/testStoreBというオブジェクトが生成されます。
結果、Vuexのオブジェクトが競合してしまいundefinedとなるわけです。
もちろんmutationsを実行しても値を入れられず undefined となります。
最後に
Vuexの構造には注意して開発をする必要がありますね。今後自分も気をつけます。
株式会社Grandreamでは、フルリモートであなたのスキルを活かし、活躍できるエンジニアを募集しております。
詳しくは採用ページをご確認いただき、お気軽にお問い合わせください。
