【Nuxt.js】Vuexまとめ編：はじめる前に、簡単理解！

前置き

ログイン情報の保持や
APIのデータ保存など
とにかく便利なVuex🌟
さぁ、やってみよう！💪
と思っても1から理解するのは大変ですよね？

「忙しいのに
　また新しいことやるのか…😔💦」
そんな方へ向けて超簡単に
最低限ここさえ分かればOK！
な部分をまとめました。

導入の仕方や
ディレクトリ構成は
基礎編でどうぞ！

【Nuxt.js】Vuex基礎編：コードをスッキリさせよう

メリット

どこからでもアクセスできること
これが最大のメリットです👍

複数のコンポーネントで
同じデータを保有したい場合、
propsや$emitでもできますが
ネスト(階層, 入れ子)が深いと
受け渡しの関係が分かりにくく
複雑になってしまいます🌪

それを1箇所にまとめてくれるのがVuex🌟
コードもシンプルで分かりやすくなります！

状態管理パターン

Vuex とは何か？

データの状態管理の仕方です。
4つあり、一方通行(単一フロー)で操作します。
actionsとmutationsが
methodsのような役割をしています。

state
data保管庫
getters
stateの情報を取得
別gettersの呼び出しも可能
actions
storeの上書き以外の処理や非同期通信
別actionsの呼び出しも可能
mutations
stateの上書き(代入)

例

buttonクリックでcounterの数字を1増やしたい

state: counter
getters: counterを取得
actions: なし
mutations: state.counter++

これをpagesで呼び出していきます🌟

基本の呼び出し方

state: 直接呼び出すことはない
getters: (return) this.$store.getters['{関数名}']
actions: this.$store.dispatch('{関数名}')
mutations: this.$store.commit('{関数名}')

関数名の部分はディレクトリに応じて
書き方が変わります。

this.$store.getters['hoge']
store/index.jsのgetters hogeを指定
this.$store.getters['sample/hoge']
store/sample/index.jsのgetters hogeを指定

state

) file

export const state = () => ({
 hoge: [],
})

export const state = () => ({

hoge: [],

})

) pages

一応直接呼び出しもできます。

<template>
 <div class="page">
  <p>{{ $store.state.hoge }}</p>
 </div>
</template>

<script>
 export default {
 }
</script>

<p>{{ $store.state.hoge }}</p>

</div>

</template>

export default {

}

</script>

が、gettersを通して呼びましょう。
それぞれ役割が決まっているためです。
アーキテクチャやMVVMを見てみると
良いかもしれません👀

getters

gettersの時だけ関数名を[ ]で囲みます！

) file

export const getters = {
 hoge: state => {
   return state.hoge
 },
}

export const getters = {

hoge: state => {

return state.hoge

}

) pages

<template>
 <div class="page">
   <p>{{ hoge }}</p>
 </div>
</template>

<script>
export default {
 computed: {
   hoge () {
     return this.$store.getters['hoge']
   }
 },
}
</script>

</div>

</template>

export default {

computed: {

hoge () {

return this.$store.getters['hoge']

}

</script>

actions

非同期通信やAPI通信など。
stateの上書きはmutationsに任せるので
mutationsの呼び出し(commit)をします。

サンプルコードは特にactionsを通さず
mutationsで事足りるのですが
あえて分かりやすく書くとこうなります。

) file

export const state = () => ({
 counter: 1,
})

export const getters = {
 counter (state) {
   return state.counter
 },
}

export const actions = {
 countAction ({ commit }) {
   commit('countUp')
 }
}

export const mutations = {
 countUp (state) {
   state.counter++
 },
}

export const state = () => ({

counter: 1,

})

export const getters = {

counter (state) {

return state.counter

}

export const actions = {

countAction ({ commit }) {

commit('countUp')

}

export const mutations = {

countUp (state) {

state.counter++

}

) pages

<template>
 <div class="page">
   <button
     type="button"
     @click="count"
   >
     {{ counter }}
   </button>
 </div>
</template>

<script>
export default {
 computed: {
   counter () {
     return this.$store.getters['counter']
   },
 },
 methods: {
   count () {
     return this.$store.dispatch('countAction')
   },
 },
}
</script>

<button

type="button"

@click="count"

</button>

</div>

</template>

export default {

computed: {

counter () {

return this.$store.getters['counter']

methods: {

count () {

return this.$store.dispatch('countAction')

}

</script>

mutations

) file

export const state = () => ({
 counter: 1,
})

export const getters = {
 counter (state) {
   return state.counter
 },
}

export const mutations = {
 countUp (state) {
   state.counter++
 },
}

export const state = () => ({

counter: 1,

})

export const getters = {

counter (state) {

return state.counter

}

export const mutations = {

countUp (state) {

state.counter++

}

) pages

<template>
 <div class="page">
   <button
     type="button"
     @click="count"
   >
     {{ counter }}
   </button>
 </div>
</template>

<script>
export default {
 computed: {
   counter () {
     return this.$store.getters['counter']
   },
 },
 methods: {
   count () {
     return this.$store.commit('countUp')
   },
 },
}
</script>

<button

type="button"

@click="count"

</button>

</div>

</template>

export default {

computed: {

counter () {

return this.$store.getters['counter']

methods: {

count () {

return this.$store.commit('countUp')

}

</script>

map系

値がたくさんあって楽をしたい時に使います！
ただあまり使うことはありません。
基本的に書き方が少し変わるだけで
やっていること自体に変化はありません。

) file

export const state = () => ({
 hoge: 'mapGetters'
})

export const getters = {
 hoge (state) {
   return state.hoge
 },
}

export const state = () => ({

hoge: 'mapGetters'

})

export const getters = {

hoge (state) {

return state.hoge

}

) pages

<template>
 <div class="page">
  {{ hoge }}
 </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
 computed: {
  ...mapGetters(['hoge'])
 },
}
</script>

</div>

</template>

import { mapGetters } from 'vuex'

export default {

computed: {

...mapGetters(['hoge'])

}

</script>