VueでFirestoreのSubscribe機能を使いたい時のアプローチ
はじめに VueでFirestoreのSubscribe機能を使ってリアルタイム処理を行いたい時に、いくつかアプローチがあるのですが、それをそれぞれ検証してどうだったかを記録として残しています。 同じように、Vue・FirestoreでSubscribe機能を使いたい人の参考になれば嬉しいです。 今回、検証に使用した環境は以下です。 Nuxt.js v2.4.0 TypeScriptは未使用 FirestoreのSubscribe機能について Firestoreで、データの変更があった時に変更差分をクライアント側に通知させる際に、onSnapshotメソッドを使用します。 https://firebase.google.com/docs/firestore/query-data/listen 大まかな手順として、 リアルタイム検知したいFirestoreのドキュメントを指定して、監視対象と
Nuxt.js + Vuex + Firebase(Authentication, Cloud Firestore)でTwitterユーザー向けの伝言板を作る - Qiita
Nuxt.js + Vuex + Firebase(Authentication, Cloud Firestore)でTwitterユーザー向けの伝言板を作るFirebaseVuexFirebaseAuthCloudFirestoreNuxt この記事は「株式会社オープンストリーム Advent Calendar 2019」の19日目の記事です。 どうも、最近はFirebaseに触れていない @ysd_marrrr です。 今回はFirebaseのAuthenticationとFirestoreでユーザーを認証して、そのユーザーでやり取りするサンプルを作りました。 フロントエンドはNuxtを使っているのですが、Firebaseとどう連携させるか悩みながら決めたので共有します。 作るサンプルについて 「Twitterのタイムラインでは遥か彼方に流れてしまう、だけども自分のプロフィールにピン留
Vue.js初心者でも書ける！ゼロから始めるVuexのテスト入門編その１(vue-test-utils) - 虎の穴開発室ブログ
みなさん、いかがお過ごしでしょうか。今年の7月からラボのマーケチームに加わったY.I.です。 好きな作品は「ゆるキャン△」です。お盆休みには「ゆるキャン△」舞台の富士山周辺でキャンプツーリングをしてきました。 ゆるキャン△に関しては熟知している私ですが、技術的にまだまだ未熟な開発者です・・・。活躍できるよう頑張っていきますので、どうぞよろしくお願いします。 さて、今回はVue.jsのテスト、とくにVuexのテストについて書いていきたいと思います。 0. この記事を読んでわかること 本連載では「ゼロから始めるVuexのテスト入門編」と題して、これまでVuexのテストを書いたことがない方を対象に、全2回に渡ってVuexのテストの詳細を書いていきます。 今回は連載の第一回目として、下記の構成でお送りします。テストの必要性やポイント、またVuexのテストがどのようなものになるのか感じ取っていただけ
JestでVueコンポーネントとVuexストアの単体テストを書いてみよう! - Qiita
概要 この記事は、Ginza.js#2にて登壇した、 「Jestを使って VueコンポーネントとVuexストアのテストコードを書いてみよう!」 のLTのスライド内容を元に記事を作成しました。 ソースコードは以下で公開しています。 https://github.com/karamage/vue_jest_test 動作環境 ・Mac OS 10.14.4 ・Nuxt v2.8.1 ・Vue v2.6.10 ・Node v10.15.3 以下の記事にTipsをまとめました。合わせてご確認ください。 Vue Test Utils と Jest でコンポーネントのユニットテストを書く際のTips https://qiita.com/karamage/items/6c2163f78557a69208a8 この記事で説明すること Jestとは? Jestのインストール Jestの基本的なテストの書き方
JestでNuxt.js(Vue.js)のVuexをテスト - Qiita
みなさん、フロントエンドのテスト書いていますか？ Nuxt.js(Vue.js)でJestを使ってコンポーネントのテストについては情報がいろいろありましたが、VuexのStoreのテストについてあまり情報がなかったので、今回はVuexStoreのテストについてまとめました。 「Nuxt v2とFirebase(CloudFirestore)でPWA対応Webアプリ開発」で作成したアプリケーションをJestでテストする手順についてまとめていきます。 テストの準備 テストに必要なツール https://github.com/facebook/jest JestはFacebookが開発を進めるフロントエンドのテストランナです。 Facebook製なので当然Reactに対応していますが、その他JavaScriptアプリケーションのテストにも使用でき、Vue.jsでも利用できます。 RSpecライク
【v2対応】Nuxt.jsとFirebaseを組み合わせて爆速でWebアプリケーションを構築する - Qiita
Firebase Advent Calendar 2017 21日目の記事です。 フリーランスでフロントエンドを中心にエンジニアをやっているpotato4dです。 普段はVue.jsを中心に、案件を進めたりコミュニティに関わったりしていますが、今回はそんなVue界隈で今アツいフレームワークであるNuxt.jsとFirebaseを組み合わせて、SPA + SSRにAuthと Firestore を組み合わせたアプリケーションを高速で作る方法を、サンプルとあわせてご紹介します。 2019/10/16 追記 このサンプルは Firestore が存在しない Nuxt v1.x + RTDB 時代のコードを愚直に移行している ので全体的に資料が古くなっています。 インフラ構成については順次更新していますが、特にデータストア操作周りについては できるだけ参考にしないでください。 2019/07/02
Nuxt/VuexでFirebase Authenticationを使ってユーザー認証機能を作る - フリーランチ食べたい
Nuxt/VuexでFirebase Authenticationを使ったユーザー認証機能を作るにあたって、基本的なやり方はFirebaseドキュメントに書いてあるのですが、「どこに何を書けばいいのか」がよくわからなかったので調べながらまとめてみました。 完成形 こんな感じで用意されたUIを使ってログイン機能が実装できます。 前提条件 Firebase Projectの作成/Firebase SDKの作成はNuxt/Vuexには関係しない部分なので次の記事を参考に行ってください。この記事はFirebase SDKをNuxt/Vuexにどう組み込むか、を中心に書きたいと思います。 firebase.google.com 環境 nuxt@2.5.1 vue@2.6.10 vuex@3.1.0 firebase@5.9.2 firebaseui@3.5.2 FirebaseUIインストール＆CS
vuex-persistedstateの値が復帰しない！？ - Qiita
VuexのStateを永続化したい時は vuexのstateの値を永続化したい。そこで使っていたのが、vuex-persistedstate。 LocalStorageにstateの値を保持してくれる奴。使い方などは他の記事様などで詳しく書かれていると思うので、割愛させていただく。 問題 問題は、実際にリロードした時。stateに値があるかどうかで初期処理をしたい時に、stateの値を見ると…… undefindだった。 ん？ これっていつvuexに反映されてるの？ 答え mounted()が実行された後。 え、mounted()って表示コンポーネントが揃った後に実行されるんじゃないの？ mounted()が実行された後に戻ってくるということは、stateの値で判断して初期処理を変えたい時なんかはちょっと不便。 対処方法
Nuxt.jsのStoreによるデータ保存 [vuex-persistedstate][js-cookie]
Nuxt.jsにおいてStore（ストア）を利用すると、データの状態管理をおこなうVuexによってコンポーネント間のデータの受け渡しを一元化できます。本記事ではそのStoreとvuex-persistedstateモジュールを利用してデータをLocal Storage（もしくはSession Storage）に保存してみます。 Storeにはクラシックモードとモジュールモードがありますが、本記事ではモジュールモードによる記述で説明していきます。２つのモードの違いについては公式サイトを参照して下さい。 Nuxt.jsによるプロジェクトの作成は下記ページをご覧下さい。 Nuxt.js入門 [$route.params][layouts] プロジェクト内のディレクトリを確認します。Storeによる機能は、主に「store」ディレクトリ内にファイルを追加していくことで利用できます。 $ tree
【NuxtJS】Vuex で mapGetters 引数ありの書き方 - tomatoaiu の Tech Blog
やりたいこと Nuxt.js を利用時に、Vuex で mapGetters に引数を持たせる場合には、どのようにすればよいのか分からなかったので調べてメモしました。 やりたいこと 環境 環境構築 ディレクトリ コード store/hoge-module.js pages/index.vue 実行 解説 おまけ メソッドとして利用したい場合 参考 環境 Nuxt Vuex: モジュールモード Vuex には、クラシックモードとモジュールモードの2つのStore管理方法がありますが、この記事では、モジュールモードを取り扱います。 ※ NuxtJS のバージョン 2.12.X の以降だと、クラシックモードは 廃止予定になっているようです。 環境構築 Nuxt.js の環境構築です。create-nuxt-appを利用します。 npm i -g create-nuxt-app バージョンは、cr
VuexにおけるGettersのメソッドスタイルアクセス - emahiro/b.log
gettersでstateから任意の値を取り出すときにVuexではGettersのプロパティの返り値にfunctionを指定することで、Gettersのプロパティに関数の引数という形で直接値を渡す(アクセスできる)手法があります。これを メソッドスタイルアクセス と言います。 メソッドアクセススタイルについてはVuexの公式のGettersのドキュメントでも記載があります。 ref. ゲッター #メソッドスタイルアクセス | Vuex サンプルコードは以下のようになります。 Gettersでのプロパティの定義 getters: { hogeById: (state) => (id) => { // 外部から直に私た変数をidに入れて使うことができる。 } } 呼び出す側 store.getters.hogeById(2) // or this.hogeById(2) // getters.
【Vue.js】Vuex + LocalStorageで入力内容をブラウザに保持する | kawadeblog
環境 Vue.js 2.5.17 Vuex 3.0.1 webpack 3.12 前提条件 コンポーネント毎にdataオプションで保持データを管理するのは厳しいので、Vuexの状態管理で一元管理することが前提です。その方が、ストアの管理だけに集中できますので楽ちんです。 dataオプションからVuexへの移行は配列構造を除いて難しくありませんでした。 オブジェクトの配列をVuexのストアと各コンポーネントに設置するコントロールへバインドする方法だけ模索する必要がありました。その記事はこちら。 localStorageの読み込みと保存の実装 本当はプラグインにした方がよさそうですがはじめての実装なので、Vuexのストア構造内に直接実装します。分けたくなったら分ければいいかなぁという感じです。 シミュレーション用のデータ構造として以下のようなstore構造があります。 ※ getters、mu
ドメイン駆動Vuexで複雑さに立ち向かう
スタディスト開発部、フロントエンド担当の小宮山です。走ることが楽しくなりすぎてフルマラソン完走が当面の目標です。 今回は私達が進めているUIリニューアルプロジェクトにおける、フロントエンド設計の心臓部についてご紹介したいと思います。盛り上がりつつあるものの、まだまだ実践的な情報が少ないVue界隈に少しでも貢献できましたら幸いです。 画面駆動Vuexの頃プロジェクト始動当時は私含め大規模プロダクトにVuex（さらにその他Flux状態管理も）を導入して開発を進める経験も知見もほぼない状況でした。 そして開発していく画面デザインの大枠は出揃っている状態だったので、計画も実装も画面単位で区切って進みだしていきます。 こうした状況でVuexのstoreはどのような方針で実装されていくか。正確に表現するなら、特に方針なく実装していくとどうなるか。画面ファーストで、画面から使いやすく、画面ごとに専用なs
Nuxt.js で簡単な画像一覧アプリを作成する – Part.1 | luftgarden
オトナのプログラミング勉強会について 「オトナのプログラミング勉強会」は、熊本で開催しているプログラミングの勉強会です。 基本的に月2回（第1水曜日、第2水曜日）開催となります（2018/05/03現在）。 熊本のコワーキングスペース「未来会議室」共催のオープンでやっている勉強会ですので、参加は完全無料です。（プログラムを書く人を増やす、繋げることが目的なので、誰でも参加できるというスタンスです） 今回は、2018年4月18日に開催された「オトナのLaravel＆Vue.js開発入門@未来会議室」勉強会の参加レポートです。今回はNuxt.jsとDog APIを使って犬種ごとに画像表示するWebアプリの作成を行いました。 主催者の方から内容掲載の許可をいただきましたのでブログにまとめておきます。 Nuxt.js とは Nuxt.js は Vue アプリケーションを作成するフレームワークです。
【Nuxt.js】Vuex基礎編：コードをスッキリさせよう｜aLiz
🎈 この記事はWPへ移行しました 【Nuxt.js】Vuex基礎編：コードをスッキリさせよう # 前置きHappy Valentine❤️🍫 ということで(？)本日はVuex！ 3つに分けて書きます✍️ ・vuexとは何か ・メリットは ・簡単な使い方 公開予定日を過ぎ、 申し訳ございません🙇♀️ 自社開発アプリを進めておりました📱 # Vuexとは状態管理のライブラリです。 って言ってもイメージ沸かないので… 簡単に言うとデータ保存ができるもの ・ログイン情報が ページ遷移後も保持されたり、 ・APIのデータ引っ張ってきて保存とか、 ・methodsに何度も同じ処理書かずに済む とかとか。 $emitも何回も書かなくていいし楽！ とにかく楽！！！そんな感じです。 状態保持をするのでstoreに書きます✍️ # メリット上記の内容がそのままメリット コードもまとまって楽ちんなのは
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vuex のデータをローカルストレージに格納する | 株式会社 chatbox の Web制作レポート chatbox.note
https://pizzamanz.net/web/vue/vuex-persistedstate/
【NuxtJS】 Vuexのモジュールモードで localStorage に保存する方法 | subscribe を利用 - tomatoaiu の Tech Blog
vuexで登場する分割代入の説明 - Qiita
[Vue] Storeのstateをコンポーネントのローカルstateにコピーする - gyarasu