こんにちは!今日は前回に続き、NuxtのVuexモジュールモードの記述例を書いていきます。

前回はstore側だったから今回はstoreを呼び出す側です。 つまりinnerHTMLの部分だったりonclick...に続く部分だったりです。

HTMLからの参照

state

ファイル名「main.js」のstate「stateOne」を参照

<div>
  {{$store.state.main.stateOne}}
</div>

getters

ファイル名「main.js」の「gettersOne」を参照

<div>
  {{$store.getters['main/gettersOne']}}
</div>

actions

ファイル名「main.js」の「actionsOne」を呼び出し

<div @click='$store.dispatch('main/actionsOne')'>
</div>

mutations

ファイル名「main.js」の「mutationsOne」を呼び出し

<div @click='$store.commit('main/mutationsOne')'>
</div>

JavaScriptからの参照

上記の例の最初に全て「this.」を付けるだけです:)

stateなら「this.$store.state.main.stateOne」みたいな感じ!

さいごに

とりあえず呼び出す側と呼び出される側を書きましたが、モジュールモードは慣れるまでめっちゃ複雑なので次回は間違えやすいポイントみたいな記事書きます!さらば