firebase

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

前置き

v-modelで直接storeを書き換えて
それをfirebaseへ送信してみます📤

ですが実際に使う場面はほぼありません😂笑

というのも、
firebaseを使って入力した値を送信さえできれば良いからです。
取得も簡単にできるので
わざわざVuexを使ってstoreに保存する必要がないのです…!

なので
仕組みを見て「ふーんなるほど💡」と
分かってもらえたら良いなと思います🍒👌

v-model, computed, vuex, firesbase(firestore)
解説記事を読んだ方なら、
当たり前じゃん❗️
と思うかもしれません!
それぞれの解説記事もあるので
リンクを貼っておきます🎈🧸

⬇️解説記事はこちら
v-model: https://wp.me/pc9NHC-kI
computed: https://wp.me/pc9NHC-wY
Vuex: https://wp.me/pc9NHC-gl https://wp.me/pc9NHC-dH
firestore: https://wp.me/pc9NHC-g4


完成コード

まずは完成コードからお見せしちゃいます🌟
この後に、ここに至るまでの考え方などを書いていきます。
そちらを見ながらやってみてください🔥💪

firestoreとの連携などは前置きリンクからご覧ください👀

) file

) pages

) file


経緯

それでは解説をしていきます💡

【参考記事】
https://designsupply-web.com/knowledgeside/4884/

Step1: まずはinputをv-modelで作る

画像1

v-modeldatanameと紐付けます。

コード

) pages


Step2: v-modelで直接stateと紐づける

inputをいじった瞬間にエラーがでます。
stateの値はmutationsでしか変更できないからですね。

Error

[vuex] do not mutate vuex store state outside mutation handlers.

スクリーンショット 2020-04-01 17.55.19

コード

) pages

) file


Step3: mutationsでstateを変える

画像3

書き換えができていますね🌟

@inputで値を入力した時に
mutationsstateを書き換えます。

ただv-model自体に@inputv-bindが含まれているので
@inputが重複していて変な感じがしますね。

コード

) pages

) file


Step4: スマートにgetter関数とsetter関数を使う

画像4

v-modeldataも一緒にcomputed
get, setすれば良いですね🌟

コード

) pages

) file


Step5: firebaseの関数を追加して完成!

送信ボタンを追加して、
firestoreへ送信するだけです📤
firebaseの関数はfirestoreの記事をご確認ください👀


まとめ

いかがでしたか?
いままでの記事を参考に
復習になったかと思います✨

躓いた部分があれば、
それぞれの解説記事で
マスターしていきましょう❤️💪

-firebase
-,

© 2020 aLiz Nuxt