Vueと共通

【Nuxt.js】Vuex基礎編②stateを複数使ってみよう

前置き

今回は前回の基礎編に続き、
stateが複数ある場合の書き方です✍️
基礎編でVuexの基本的な解説はしています!
また基礎編のコードに追記するので
そちらを確認しながらやってみてください🌟

Vuex基礎編はこちら

やりたいこと

基礎編のカウンターを2つに増やします!
これだけ!!!

NGパターン

まずはNGパターンから。
まずはstateにsubCounterを追加。
mutationsなどにも同様に
subCounterについて追記します✍️

が!
これだと後述したsubCounterに
全てがまとまってしまいます。。。

コード

) file

) components

) pages

OKパターン

ということで
mutationsを一つに統一しましょう⭕️
第二引数indexを使って
0の場合はcounterを
1の場合はsubCounterを
変動させます。

こんかいはその2パターンで良いので
if文のelse ifまであればOKですね🎵😄

追加の引数の書き方は公式参照です✍️
https://vuex.vuejs.org/ja/guide/mutations.html#追加の引数を渡してコミットする

コード

🎈変更箇所のみ記載します🧸

) file

) components

ここで第二引数に0, 1を入れて
counterとsubCounterの区別をしています🌟

これで完成です🤗🎉

完成コード

) file

) components

) pages

-Vueと共通
-,

© 2024 aLiz Nuxt