何?
Nuxt で、Vuex Store をディレクトリ構造で階層化したかった。
けどできないと思ってた。
でも実はできたので自分にキレてる。
試した
環境
- nuxt: v2.8.1
ディレクトリ構造
コード
~/store/a/b/c/c-child.js
export const state = () => ({
test: 'c-child',
hoge: 'piyo'
})
export const actions = {
testAction({ commit }) {
commit('setTest', 'actionしたよ')
}
}
export const mutations = {
setTest(state, payload) {
state.test = payload
}
}
~/pages/index.vue
<template>
<div />
</template>
<script>
export default {
async fetch({ store: { dispatch } }) {
await dispatch('a/b/c/c-child/testAction')
}
}
</script>
結果
できると何が良い?
- 肥大化したstateの分割
- ドメイン別のディレクトリ構成による管理
気を付けたいこと
ディレクトリ名とstate名が被らないようにしないといけない
なぜできないと思っていたのか
わかりません......
でもやっているのを見たことがなかったので......
信じてください......
責任逃れ
https://ja.nuxtjs.org/guide/vuex-store/
書いてないから私は悪くない、悪くないんだ