LoginSignup
4

More than 3 years have passed since last update.

Nuxt モジュールモードでStore階層化できるやんけ!!!(全ギレ)

Last updated at Posted at 2019-07-31

何?

Nuxt で、Vuex Store をディレクトリ構造で階層化したかった。

けどできないと思ってた。

でも実はできたので自分にキレてる。

試した

環境

  • nuxt: v2.8.1

ディレクトリ構造

image.png

コード

~/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>

結果

image.png

できると何が良い?

  • 肥大化したstateの分割
  • ドメイン別のディレクトリ構成による管理

気を付けたいこと

ディレクトリ名とstate名が被らないようにしないといけない

なぜできないと思っていたのか

わかりません......
でもやっているのを見たことがなかったので......
信じてください......

責任逃れ

https://ja.nuxtjs.org/guide/vuex-store/
書いてないから私は悪くない、悪くないんだ

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4