アプリケーションの状態管理を簡素化するVuexFireを使用してください

VuexFireに取り組む問題はかなり簡単です:FirebaseのファイアストアまたはRTDBのデータと同期して状態データを維持.あなたがVueとVuexに精通しているならば、私はあなたが前にこの問題に直面したと確信します.リストを行うようなシンプルなアプリを考えてみましょう.

ユーザーが新しいtodoを作成するたびに、Vuexアクションはバックエンドに要求を送信し、アプリケーションの状態を更新するために突然変異をコミットします.

がユーザーがtodoを完了するときに、VUEXアクションはバックエンドに要求を送り出して、それから状態において、その事項をアップデートするために他の突然変異を始める.

がユーザーを削除するときに、VUEXアクションはバックエンドに別の要求を送り出して、それから他の突然変異を実行して、その事項から特定のto - doを削除する.

あなたが見ることができるように、すべてのユーザーの相互作用は、バックエンドのデータと同期してアプリケーションを維持するためにVUEXのアクションと突然変異を必要とします.VuexFireは私たちのためにこれを簡単に、我々のアプリケーションの状態をFireStoreまたはRTDBにバインドし、自動的に任意の突然変異を書き込みまたはコミットする必要がなく状態を更新します.これは、配列からの項目の追加や削除やオブジェクトの更新などの一般的なものの世話をする突然変異の独自のセットを提供することで、これをアーカイブします.
基本的な例であなたを歩かせてください.

I'm assuming we already have a Vue CLI project scaffolded with Vuex installed. You can find more info on how to do that here.

Vuexfireでデータを取得する

我々は本を管理するアプリを構築したいとしましょう.まず最初にやるべきことは、FireBaseとVuexfireの依存関係をnpm i firebase vuexfireを実行しているVueプロジェクトにインストールすることです.
それから、私はfirebaseをつくりました.Firebase SDKをプロジェクトキーで設定するJSファイルと、Booksという名前のFireBaseコレクションに保存されていると仮定して参照を作成します.次のようになります.

// File src/firebase.js

import firebase from 'firebase/app'
import 'firebase/firestore'

const firebaseApp = firebase.initializeApp({
  apiKey: process.env.VUE_APP_APIKEY,
  authDomain: process.env.VUE_APP_AUTHDOMAIN,
  databaseURL: process.env.VUE_APP_DATABASEURL,
  projectId: process.env.VUE_APP_PROJECTID,
  storageBucket: process.env.VUE_APP_STORAGEBUCKET,
  messagingSenderId: process.env.VUE_APP_MESSAGINGSENDERID,
  appId: process.env.VUE_APP_APPID,
})

const db = firebaseApp.firestore()
// collection reference
const booksCollection = db.collection('books')

// exports collection reference to use it in the Vuex Store
export { booksCollection }

Note: In this example I'm loading the Firebase keys from environment variables but you can load the values directly 😉

アプリケーションストアでは、すべての本を状態の中でallbooksという名前のプロパティに保存したいと思います.

// File src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    // list of all books initialized empty
    allBooks: [],
  },
  actions: {},
  mutations: {},
  getters: {}
}

次に必要なのは、Booxのアクションを作成して、Booksからデータを返すFirestoreクエリを使用して、AllBooksプロパティを状態からバインドすることです.

// File src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

// imports collection reference from firebase.js file
import { booksCollection } from '@/firebase'
// imports required to bind the state to Firebase using Vuexfire
import { firestoreAction, vuexfireMutations } from 'vuexfire'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    allBooks: [],
  },
  actions: {
    /**
     * @param context deconstructed to get only the method to create the ref
     */
    bindBooks: firestoreAction(({ bindFirestoreRef }) => {
      // return the promise returned by `bindFirestoreRef`
      return bindFirestoreRef(
        'allBooks',
        booksCollection.orderBy('author', 'asc')
      )
    }),
  },
  mutations: {
    // adds Vuexfire built-in mutations
    ...vuexfireMutations,
  },
  getters: {
    allBooks: (state) => {
      return state.allBooks
    },
  },
})

見ての通り、アクションBindbookはFirestoreActionで、VuexFireからインポートしました.このアクションは、BindFireStoreRef ()によって解決された約束を返します.これは2つのパラメータを受け取ります.データのバインドを行う状態(AllBookでは)、およびデータを返すクエリ(例では、著者によって命令されたすべての書籍)です.
私もvuexfiremutationをインポートし、私たちの変異の中に破壊演算子を使用して追加.最後に、コンポーネントから使用される状態のALBooksリストを返す単純なゲッターを作成しました.
次のステップは、すべての本を表示するコンポーネントを作成することです.非常に簡単なものは次のようになります.

// App.vue file

<template>
  <div id="app">
    <h1>My Book List app</h1>
    <div class="book" v-for="book in allBooks" :key="book.id">
      <h2>{{ book.title }}</h2>
      <p>Written by {{ book.author }}</p>
      <p>{{ book.summary }}</p>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'App',
  mounted() {
    this.$store.dispatch('bindBooks')
  },
  computed: {
    ...mapGetters(['allBooks']),
  },
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.book {
  margin: 2rem;
  border-bottom: 1px solid gray;
}
</style>

ご覧のように、マウントされたライフサイクルフックの上で、私はストアで作成したアクションを発送します.そして、それはFirestore Booksコレクションからデータのリストを得ます.それはあまりにも多くのコードをこれを構築するために取らなかったので、それは素晴らしいが、最良の部分は、我々が追加、削除、またはFireBaseコンソールから書籍を直接更新する場合、我々のアプリは自動的にそのストアを更新します.

を使用してFireStoreに書き込む

今まで、私はどのようにVuexFireを使用して自動的にFireStoreと同期してアプリケーションの状態を維持する方法を示してきたが、実際の世界のアプリでは、我々は、更新、またはデータベースからドキュメントを削除する必要があります.そのシナリオのために、VuexFireはどんなメソッドまたはヘルパーも提供しません、そして、as mentioned in the documentation、あなたはFirebase JS SDKを使うよう勧めます.
コレクション内の書籍を追加および削除する2つの簡単なVEXアクションは次のようになります.

// File: src/store/index.js

// .....
export default new Vuex.Store({
  state: {
    allBooks: [],
  },
  actions: {
    /**
     * @param context deconstructed to get only the method to create the ref
     */
    bindBooks: firestoreAction(({ bindFirestoreRef }) => {
      // return the promise returned by `bindFirestoreRef`
      return bindFirestoreRef(
        'allBooks',
        booksCollection.orderBy('author', 'asc')
      )
    }),
    addBook: firestoreAction((context, payload) => {
      console.log('Adding a new book!')
      return booksCollection.add(payload.newBook)
    }),
    deleteBook: firestoreAction((context, payload) => {
      console.log(`Deleting book ${payload.bookId}`)
      return booksCollection.doc(payload.bookId).delete()
    }),
  },
})

Note: we'd need to pass the payload for each action from the component. You can see the detailed code in this file of the repo

これらのアクションでは、私たちが通常VUEXで行うような突然変異をコメントしていないことに注意してください.これは、最初のアクションBindBooksはFireStoreと同期してアプリケーションの状態を維持するの世話をするためです.したがって、実際にadd ()またはdelete ()関数を起動しなければならないとしても、VuexFireを使用すると、状態をリフレッシュすることを心配する必要はありません.
あなたはthe following repo in GitHubでこの記事のすべてのコードを見つけることができます.

結論

あなたが見ることができるように、VuExFireはあなたのVUEアプリの状態管理を簡素化するために使用できるかなり良いツールです.私はone of my latest projectsでそれを統合しました、そして、私はコードのトンを取り除くのを助けました、そして、あなたが持っているより少ないコード、あなたが多分見つけるだろうより少ないバグ😅
もちろん、それには制限があります.例えば、ページ付けのように.しかし、私がStackOverflowの上で見つけたいくらかのガイダンスのおかげで、私は私のために働く単純なページ化をコード化することができました.次の記事であなたと共有します.
あなたがこの記事が好きであるならば、あなたはどこで私が私のプロジェクトの進行についての面白い記事と最新版についてのDev🤙
ハッピーコーディング!
この記事はもともと、ノードに焦点を当てたウェブ開発に関する他の記事を見つけることができるmy blogに投稿されました.JS、Vue、ララベルと製品開発に関連した何でも.