【JS】NuxtのVuexモジュールモードの簡潔な書き方メモ-2.呼び出しと参照
こんにちは!今日は前回に続き、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」みたいな感じ!
さいごに
とりあえず呼び出す側と呼び出される側を書きましたが、モジュールモードは慣れるまでめっちゃ複雑なので次回は間違えやすいポイントみたいな記事書きます!さらば
PREV
2019-05-20
【JS】NuxtのVuexモジュールモードの簡潔な書き方メモ-1.ストア
NEXT
2019-05-23
【JS】Promiseで書かれたAjaxをasync/awaitに書き直す
LINK
リンク
Twitter
GitHub
TAGS
タグ
LATESTS
最新の記事
POPULAR
人気の記事
- CSS2021/04/29【CSS】右寄せの方法は結局flexが一番良さそう
- React2020/07/13【JS】Reactのstyleの使い方、書き方いろいろ
- Payment2021/10/16GooglePayでVisaタッチを使う時に知っておきたい過酷な現実【追記あり】
- Others2021/07/11Slackに予約投稿機能ができて嬉しいけどそれでもまだ少し不満な理由【追記あり】
- CSS2020/04/30【CSS】tailwind.cssでよく使うデザインパターン
- CSS2019/03/30【CSS】100vhは「一画面」ではないという罠
- CSS2020/06/09【CSS】max-font-sizeやmin-font-sizeを使いたくなったら
- Vue2019/06/29【JS】Vueの:classの書き方3通り
- JavaScript2020/09/02【JS】yarnの長所とyarnからnpmに戻ってきた理由
- React2020/06/04【JS】ReactのclassNameの色々な書き方紹介