Vueと共通

【Nuxt.js】Nuxt実践編:v-model + Vuex

前置き

v-model(input)の値を
Vuexに保存してみましょう🌟

通常はページ遷移をすると
入力した値が消えてしまいます💥

そこでデータ保存のできる
Vuexを使うわけです💡💕

具体的な使用例は…

性格診断🕵️‍♀️
各入力項目ごとに
ページ遷移しても
最後にその結果を反映して
こんな性格です!
と再表示させる

ショッピングサイト🛍
買い物カゴに追加した商品が
ページ遷移しても
残ったままにする

などがあります✨🍎

サーバーで保存したいんだけど💡
という方、
その場合でもVuexの使用は必須になるので
ぜひやってみてください🍀😄
この辺りは次で説明します✍️

⬇️Vuexとは何か、メリットなどは
 こちらをご覧ください✨👀
【Nuxt.js】Vuex基礎編:コードをスッキリさせよう
【Nuxt.js】Vuexまとめ編:はじめる前に、簡単理解!


保存の種類と段階について

データ保存には段階があります👣

  1. Vuexで管理をするようにする
  2. Cookieで管理をするようにする
  3. サーバーで管理をするようにする

2なら1は必須
3でも1は必須で、2はやった方が良い
という物になります🌟

いずれにしてもVuexは使用するので
やっておきましょう💫🧙‍♀️

1番良いのはサーバー保存ですが、
通信の増加に伴って
サーバー料金も増えたりします💰
その対策として
Vuexのみを使用することもあります🍒

ただしデータ保存といっても
リロードすると初期状態に
戻ってしまうため、
リロードしてはいけない場所で使います💡


getterとsetterを使う

computedgettersetter
storeから呼び出します🌟

命名はstategettersの違いなどを
分かりやすくするために
gettersMessageなどにしています。
その時の役割で
命名してあげてください🍎

⬇️computedについて
【Nuxt.js】Nuxt文法編:computed

役割が分かれているので、
stateを直接呼び出さないように
注意してください💥✋


シンプルver.

まずはページ遷移などなしに
簡単に呼び出してみます。


遷移ver.

inputをコンポーネントにします。
アトミックデザインでの分類を
するほど数がないので
componentsの直下に
InputDefault.vueで作成しています。

コンポーネントのimport
登録は面倒なので
自動で行っています🌟
06: 自動でインポートする

directory

components/
--| InputDefault.vue

pages/
--| index.vue
--| result.vue

store/
--| index.js


補足: mapを使う場合

gettersが複数ある場合に有効です!
今回は1つしかないので
あくまで書き方の参考に
してもらえると良いかと思います🌟

また、setterを使う必要はありません💡

⬇️mapについてはこちらをご覧ください
【Nuxt.js】Nuxt文法編:Vuexのmapって結局なに??

computed

mapを使ってstoreを呼び出します💡
methodsmutationを呼び出して
storeの値を書き換えています✍️

v-model

v-modelがない!?
と混乱した方!!!✋

v-model
v-onv-bind
まとめて1行で書くための
シュガーシンタックスです!
今回は値をバインドする必要がないので
@inputのみを使用しています。

⬇️v-modelについて
【Nuxt.js】Nuxt文法編:v-model①
【Nuxt.js】Nuxt文法編:v-model②

その他

コンポーネントのimport
登録は面倒なので
自動で行っています🌟
06: 自動でインポートする

store/index.js
index.vue
この2つはパターン1と全く同じです🌟


まとめ

Vuexやcomputed, v-modelなど
様々な知識を使うようになってきました🌟
そのため初心者タグから
中級者にしております❤️👏

-Vueと共通
-,

© 2021 aLiz Nuxt