見出し画像

【Nuxt.js】アプリ開発基礎編:Nuxt + Vuex + firebaseでシンプルToDoリスト

🎈 この記事はnoteでの有料記事のため
  WPへ移行していません🧸

※2020/11/03
 ①gifやpngなどの画像を少し追加しました。
 ②Step8の解説
  actionsの文言を修正しました。
 ③呼び出していない
  { commit }などを削除しました。
 ④リストをクリックすると
  firebaseでは削除されているが
  サイト上では削除されない時が
  あることを発見しました。
  今後修正していきます。
※2020/11/04
 ①plugin/firebase.jsの
  importの書き方を変更しました。
  import firebase from "firebase"
※2020/11/05
 ①完成コードをGitHubに公開しました。
  目次の # 完成コード にリンクがあります。

※今後もアップデートをする可能性がございます✨
 不具合などがありましたら教えてください🙇‍♀️

# 前置き

画像8

本格的なTODOリストを作っていきます!
すっごく簡単なTODOリストは以前やりましたが、
一時的な物なのでリロードしたら消えます💥😲
https://note.com/aliz/n/nda7438249ca8

今回はfirebaseとVuexで
本格的TODOリストを作成します✨🎈

・firebaseでデータ管理
・Vuexで状態を保持

内容が濃いのでお知らせした通り、
有料記事となります💰
まずは基本の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: リストの作成

スクリーンショット 2020-11-03 14.37.44

【解説/index.vue】

予めdataにリスト項目を入れて
Mustacheで表示させるだけ🌟

【コード/index.vue】

<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>

続きをみるには

残り 14,882字 / 11画像

¥ 500

期間限定 PayPay支払いすると抽選でお得に!

この記事が気に入ったらサポートをしてみませんか?