====== 190127 初めてのVuex ====== Vue.js自体はビューを表示するためのシステムなので、コンポーネントをまたいでデータをやり取りする場合は、vuexという場所で、ルールに従ってコードを記載するのがよいらしいです。 むちゃくちゃややこしいのですが、Vue.jsで複数ページで構成されるようなアプリを構築するためには、必須の知識です。 がんばって写経しながら学んでいきたいと思います。 Vuexを理解するために、以下の3つの本を繰り返し読み、出来る限り写経しました。Vuexを理解するために、2019年1月時点でお勧めの3冊です。 　 　 ===== 初めてのVuex目次 ===== [[14.vue.jsのvuexで入力フォーム:index.html|14.vue.jsのvuexで入力フォーム]] [[15.vue.jsのvuexでカウンター:index.html|15.Vue.jsのvuexでカウンター]] [[16.vue.jsのvuexでパスワード制限:index.html|16.vue.jsのvuexでパスワード制限]] [[17.nuxt.jsのvuexでパスワード制限:index.html|17.Nuxt.jsのvuexでパスワード制限]] ===== vuex大まかなイメージと入力フォーム作成についてのリンク ===== https://qiita.com/aya02/items/933c6c55b8e4801f150a @aya02 2018年11月28日に更新 爆速理解！超簡単Vuex入門①[初心者対象] →なぜVuexを利用する必要があるのか？いつやるのか？に答えてくれます。 https://qiita.com/m_mitsuhide/items/f16d988ec491b7800ace @m_mitsuhide 2018年07月31日に更新 Vue.js + Vuexでデータが循環する全体像を図解してみた →最初はこれを読んでもさっぱりわからなかったのですが、他の記事を読んだり写経したりしてから、もう一度これを読んでみたら、かなりvuexが分かった気持ちになれました！ https://qiita.com/_P0cChi_/items/ebf8fbf035b36218a37e @_P0cChi_ 2017年05月14日に更新 vue.js＋Vuexチュートリアル →お勧めです！入力フォームを作成します。 https://masayuki14.hatenablog.com/entry/2017/12/14/000000 2017-12-14 Vuexのはじめかた - Vuex入門者向けのはじめの一歩ガイド →入力フォームを作成します。 https://qiita.com/Takoyaki9/items/b6638fa1aec41464fdd1 @Takoyaki9 2018年09月11日に更新 【初心者向け】状態管理にVuexを使ってみた【入門】 →入力フォームを作成します。 https://qiita.com/tiwu_official/items/d66c5f3fe92794536d32 @tiwu_official 2017年09月14日に更新 Vue.jsとVuexでTodoListを作ってみた →ToDoアプリ（create, updateのみ）をindex.htmlの1ファイルのみで作成します。https://qiita.com/tiwu_official/items/0b681d59c4c67dbad42cに、コンポーネント化したコードが解説されています。 ===== Vuexでカウンターアプリのリンク ===== https://qiita.com/ferretdayo/items/edcd2b6682148e477104 @ferretdayo 2017年12月23日に更新 IDOM Engineer Advent Calendar 201723日目 カウンターを作りながら，VueとVuexの基本をやる →最初はこちらを写経でしょうか？ -Vuexを利用しないでカウンターアプリを作成 -Vuexを利用したカウンターアプリに変更 -Vuexのコードを発展させる（mapActions，mapState，mapGetters，mapMutationsの利用） https://qiita.com/nasum/items/d17c0a628e6c32616b85 @nasum 2017年12月17日に更新 Vue.js #4 Advent Calendar 201717日目 改めて学び直すVuex →カウンターアプリを作成します。 https://qiita.com/d-dai/items/7df318b9369be3d58a58 @d-dai 2018年11月25日に更新 Vuexの簡単なサンプルを作ってみた →カウンターアプリを作成します。 ===== Vuexとログイン機能 ===== https://qiita.com/ErgoFriend/items/bd1bb445e185bf45e272 @ErgoFriend 2018年10月27日に更新 Vue vuexでfirebaseのログイン保持 →firebaseのGoogle認証を作成します。 https://mabui.org/firebase-authentication-vuex-mail-verification/ Firebase AuthenticationとVuexでメール認証を実装する 投稿日：2018年9月13日 →firebaseのメール認証を作成します。 https://www.hypertextcandy.com/vue-laravel-tutorial-authentication-part-3 2019.01.12 Vue + Vue Router + Vuex + Laravelで写真共有アプリを作ろう (6) 認証機能とVuex Masahiro Harada →https://www.hypertextcandy.com/vue-laravel-tutorial-authentication-part-2/からの続きで、Laravel+Vue+Vuexでメーリアドレス認証をバックエンドも含めて作成します。 https://qiita.com/k-okina/items/512b9e502f8db49981f3 @k-okina 2018年12月01日に更新 2018年Vue.jsとVuexを使ってる人には必ず知っていてほしいドキュメントに書かれていないコンポーネントやストア、メンテナンスの際に役立つTips https://qiita.com/zaru/items/bc90b418dd18a97d8da5 @zaru 2018年10月20日に投稿 Firebase Authentication + Vue.js を SSR/SPA 両方に対応する方法 https://tomokazu-kozuma.com/implement-login-function-with-firebase-authentication-using-vuejs-and-vuex/ 2019.01.19 Vue.jsとVuexを使ってFirebase Authenticationでログイン機能を実装する ===== Nuxt.jsとvuexのリンク ===== https://qiita.com/redshoga/items/da5c0e247e0df314a257 @redshoga 2018年12月13日に投稿 Nuxt.js #2 Advent Calendar 201812日目 FirebaseとNuxt.jsを使ってユーザ認証関係を簡単に作ってみる+1ヶ月の自分に教えたいリンク集 https://qiita.com/y-miine/items/028c73aa3f87e983ed4c @y-miine 2018年12月03日に更新 Nuxt.jsのストアをモジュールモードで使用するときのTips https://qiita.com/isamusuzuki/items/5ec800e423a3a56ef03d @isamusuzuki 2018年05月03日に更新 Nuxt.jsにBulmaを組み込んだら、Vuexストアが理解できた件 →BulmaというCSSフレームワークで、ハンバーガーメニューを作る方法が、わかりやすく記載されています。 https://tech.libinc.co.jp/entry/2018/11/15/143000 2018-11-15 真のフロントエンドエンジニアになるために、まずはNuxt.js + Firebaseを使って簡易メモ帳を作ってみた →素晴らしいです。写経してみたいと思います。 https://wb-hp.com/blog/2018/10/15/vuex-store.html Nuxt.js 必須スキル Vuex ストア を扱う 2018年10月15日 https://crieit.net/posts/Vuex-Store-Nuxt だら@Crieit開発者 2018-10-30に更新 VuexのStoreはNuxt.jsのマニュアルを見るとすぐ理解できる ===== Vuexと画像表示のリンク ===== https://engineer.recruit-lifestyle.co.jp/techblog/2016-09-15-try-vue-flux/ Vue.js + Vuexで開発をしてみよう！ Tags : VueJS Category : Frontend Date : 2016/09/15 ===== VuexとFirebaseのリンク ===== https://medium.com/@oleg.agapov/basic-single-page-application-using-vue-js-and-firebase-part-2-143a3084266f Basic Single Page application using Vue.js and Firebase — Part 2 Go to the profile of Oleg Agapov Oleg Agapov Sep 13, 2017 ===== リンク ===== 目次： 前： 後：