Vueと共通

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

前置き

色々と便利なVuex!
でも何が便利なのかピンとこないし
使うにしても導入面倒くさそ😕
なんて思ってませんか!?

めちゃくちゃ簡単に解説しましたよ🌟
5分で導入、使用できるのでやってみてください💕

Vuexとは

状態管理のライブラリです。
って言ってもイメージ沸かないので…

簡単に言うとデータ保存ができるもの
・ログイン情報が
 ページ遷移後も保持されたり、
・APIのデータ引っ張ってきて保存とか、
・methodsに何度も同じ処理書かずに済む
とかとか。
$emitも何回も書かなくていいし楽!
とにかく楽!!!そんな感じです。

状態保持をするのでstoreに書きます✍️

メリット

上記の内容がそのままメリット
コードもまとまって楽ちんなのは
このあとの未使用・使用の比較
を見ていただければ分かります👀

Vuexの使い方

今回作るのはこちらです🌟

Vuexのインストール

terminal

npm install vuex --save

使い方(pages/index.vueのみver.)

まずは分かりやすく
components使わず
pagesだけで完結させます。

Vuex公式

比較:Vuex使用

) file

) pages

比較:Vuex未使用

それぞれの対応箇所が分かりますね。

  • dataがstate
  • methodsがmutations

使い方(Components使用ver.)

比較:Vuex使用

) file

Point!

  • index.jsはバグりやすいので新しいjsファイルを作成
  • そのため呼び出し方が変わります!
  • gettersでstateの状態を取得する必要あり

) components

ここで呼び出し方が
'ファイル名/定義した物' に変わります🌟

) pages

親には何も書かず超スッキリ🌟🌱

比較:Vuex未使用

$emitとか親でどう処理するかとか
いちいち分けたり何度も書く必要が出てきます。

) components

) pages

-Vueと共通
-,

© 2024 aLiz Nuxt