前置き
本格的なTODOリストを作っていきます！
すっごく簡単なTODOリストは以前やりましたが、
一時的な物なのでリロードしたら消えます💥😲
https://qiita.com/aLiz/items/7d9e907850c15cc546a6
今回はfirebaseとVuexで
本格的TODOリストを作成します✨🎈
・firebaseでデータ管理
・Vuexで状態を保持
内容が濃いのでお知らせした通り、
有料記事になりました💰
https://note.com/aliz/n/n8411db2c9a20
まずは基本のTODOリスト、
次回以降のカスタマイズとして
・ログイン機能の追加
・リストに画像機能の追加
も公開していきますよ！
CSSも追加したりして
自分好みのリストにしてみてください💕🥤☺️
Stepについて
いつも通り超簡単なところから
だんだんと肉付けをしていきます。
初心者にも分かりやすく書きました💕
分からなくても基礎的な記事を
確認しながらやってみてください🍀
【流れ】
・index.vueでTODOリストを作成
・Vuexに置き換える
・Firebaseに置き換える
【基礎】
こちらはずっと無料です！
firebase導入編：https://note.com/aliz/n/nacc97fe7d019
Vuex基礎編：https://note.com/aliz/n/n497914c981c8
Vuexまとめ編：https://qiita.com/aLiz/items/6756268a42b0c864d024
【心構え】
・丁寧に1つずつ
・分かる所は飛ばしてもOK🌱
分からなくなったら戻ってもOK🌱
・一気に全部やろうとしない
・記事を参考に公式の見方が
分かるようにしましょう👀
https://firebase.google.com/docs/firestore
https://ja.nuxtjs.org/guide/vuex-store/
Step1: リストの作成
【解説/index.vue】
予めdataにリスト項目を入れて
Mustacheで表示させるだけ🌟
<template>
<div class="page">
<ul>
<li
v-for="todo in todos"
:key="todo"
>
{{ todo }}
</li>
</ul>
</div>
</template>
<script>
export default {
data () {
return {
todos: ['これと', 'あれと', 'それ']
}
},
}
</script>