Vueと共通

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

前置き

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

「忙しいのに
 また新しいことやるのか…😔💦」

そんな方へ向けて超簡単に
最低限ここさえ分かればOK!
な部分をまとめました。

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


メリット

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

複数のコンポーネントで
同じデータを保有したい場合、
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

) pages

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

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

getters

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

) file

) pages

actions

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

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

) file

) pages

mutations

) file

) pages

map系

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

) file

) pages

-Vueと共通
-,

© 2024 aLiz Nuxt