【JS】NuxtのVuexモジュールモードの簡潔な書き方メモ-1.ストア
こんにちは!今日はNuxtで用いるVuexの記述方法のうち最もややこしいやつであるモジュールモードの簡潔な書き方について紹介します。
Nuxtではクラシックモードが使えなくなる
v3からなくなるそうです。今のうちにモジュールモードに移行しよう!ややこしいけど...
てなわけで今回は自分の備忘録を兼ねて、state, getters, actons, mutations の4つの記述例を書き連ねます。どうぞーー
記述例
state
export const state = () =>
({
stateOne: 1,
stateTwo: 2,
stateThree: 3,
})
getters
export const getters = {
gettersOne: state =>
state.stateOne,
gettersTwo(state){
return state.stateTwo
},
gettersThree(){
return 3
},
}
actions
export const actions = {
actionsOne: ({commit}) =>
commit('mutationsOne', 1),
actionsTwo({commit}){
commit('mutationsTwo', 2)
},
actionsThree({commit}){
commit('mutationsThree')
}
}
mutations
export const mutations = {
mutationsOne: (state, n) =>{
state.stateOne = n
},
mutationsTwo(state, n){
state.stateTwo = n
},
mutationsThree(state){
state.stateThree = 3
},
}
おわりに
モジュールモードはわりと書き方に癖ありなので、書く時に間違えやすい所的な記事をそのうち書きますわ:)
【追記】(2019/05/16)続き書きましたー
PREV
2019-05-19
【JS】JavaScriptで世界で一番クールなFizzBuzzと二番目のFizzBuzz
NEXT
2019-05-22
【JS】NuxtのVuexモジュールモードの簡潔な書き方メモ-2.呼び出しと参照
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の色々な書き方紹介