경위

Nuxt.js에서 vuexfire를 사용하려고 할 때 Twitter, Qiita, Gihub 등 다양한 검색을하고 있다면 Nuxt와 궁합이 안좋을 것 같은 것을 알았기 때문에 Nuxtjs에서 움직이는 패키지를 만들려고 생각했습니다!
덧붙여서 npm은 첫 공개로, 작법을 별로 알 수 없습니다. 많이 보아라.

htps : // 기주 b. 코 m/ゔ에 js/ゔ에후에레/이스에 s/203

만든 패키지 및 샘플

firex-store

htps : // 기주 b. 코 m / r - 코 히 jp / 푹신 x - s

firex-store 사용하는 샘플 프로그램

htps : // 기주 b. 코 m / r- 코 히 jp / 푹신 x - s 트레 mp ぇ

기능

기능에 대해서는 크게 나누어 3개 있습니다!
1. firestore에서 데이터 구독 취소 취소 기능
2. 데이터 취득 기능
3. 구독 구독 해제의 Action 생성 기능

사용법에 대해서는 이하가 됩니다!
htps : // 기주 b. 이 m/의 r-코-히-jp/훼레 x-s 잡아/bぉb/마s r/도 cs/v1/v1-우사게. md

옵션 정보

상기 기능에 대해서입니다만,
FirestoreSubscriber/FirestoreFinder/firestoreSubscribeAction
에는 options라는 인수가 있습니다.
그 기능에 대해입니다.
설명을 먼저 하고, 예는 마지막에 올립니다!

1. mapper

배열이나 rxjs를 사용하는 사람이라면 잘 아는 기능입니다.
이 경우, firestore로부터 취득·구독해 오는 값을 변환할 수가 있습니다.
다만, 주의해 주셨으면 하는 것은,
firestore의 documentId는 docId라는 값으로 map 기능을 통해서도 들어옵니다.
아무것도 정의하지 않으면 아무 것도 변환 처리가 실행되지 않고 firestore에 등록된 데이터가 그대로 들어옵니다.

2. errorHandler

그대로입니다. 오류가 발생한 경우 처리를 설정할 수 있습니다.
기본값이면 console.error(error) 가 호출됩니다.

3. completionHandler

그대로입니다. 처리가 끝나면 호출됩니다.

4. afterMutationCalled

※ 데이터 취득 처리(FirestoreFinder)에서는 불리지 않습니다.
구독 기능에서 mutation이 끝난 후에 호출됩니다.
불려 갈 때의 인수로서는 다음과 같은 구성으로 되어 있습니다.

interface Payload {
  data: { docId: string, [key: string]: any }
  statePropName: string
  isLast?: boolean
}

data는 firestore로부터 데이터를 취득→Mapper로 변환한 후의 값이 들어가 있습니다.

statePropName은 바인드할 속성 이름을 포함합니다.

isLast는 컬렉션을 구독할 때만 true/false를 포함합니다. 말 그대로, collection의 마지막만 true가 됩니다.
이것을 이용하는 것으로, progress circular와 같은 loading draw의 종료의 타이밍을 설정할 수 있게 됩니다.

5. notFoundHandler

※ 데이터 취득 처리(FirestoreFinder)에서는 불리지 않습니다.
데이터가 존재하지 않을 때 호출됩니다.
불려 갈 때의 인수로서는 이하의 2개의 인수를 가집니다.

type: string,
isAll: boolean

type은 구독중인 데이터가 'document'인지 'collection'인지를 포함합니다.

isAll은 'collection'의 경우, 모든 데이터가 없었는지, 1문서가 없었는지의 판정으로 사용할 수 있는 플래그가 되어 있습니다.

위의 샘플에서 일부 발췌입니다. 옵션 항목은 다음과 같이 사용합니다.

store/comment.js

import {
  firestoreMutations,
  firestoreUnsubscribeAction,
  on,
  from,
  actionTypes
} from 'firex-store'
import { firestore } from '../plugins/firebase'

export const state = () => ({
  comments: [],
  isLoaded: false
})

export const getters = {
  comments: (state) => state.comments,
  isLoaded: (state) => state.isLoaded
}

export const mutations = {
  ...firestoreMutations('collection'),
  INITIALIZED: (state) => {
    state.comments = []
  },
  SET_LOAD_STATE: (state, isLoaded) => {
    state.isLoaded = isLoaded
  }
}

export const actions = {
  [actionTypes.collection.SUBSCRIBE]: ({ state, commit }) => {
    from(firestore.collection('/comments').orderBy('date', 'asc'))
      .bindTo('comments')
      .subscribe(state, commit, {
        mapper: (data) => ({
          message: data.message,
          date: data.date,
          user: {
            docId: data.user.docId,
            displayName: data.user.display_name
          }
        }),
        afterMutationCalled: (payload) => {
          if (typeof payload.isLast === 'undefined') {
            return
          }
          commit('SET_LOAD_STATE', payload.isLast)
        }
      })
  },
  ...firestoreUnsubscribeAction(on('comments'), { type: 'collection' }),
  CREATE: (_, { comment }) => {
    firestore.collection('/comments').add(comment)
  }
}

pages/comments.vue

...
 async asyncData({ store }) {
    const user = await from(
      firestore.collection('/users').doc(store.getters['auth/uid'])
    )
      .once()
      .find({ completionHandler: () => console.log('can fetch') })
    return { user }
  },
  async fetch({ store }) {
    // store.commit('comment/INITIALIZED') //  if you'd like to unsubscribe, comment out, please
    await store.dispatch(`comment/${actionTypes.collection.SUBSCRIBE}`)
  },
...

미래 전개

데이터의 기입 처리(transaction이나 increment도 포함한다)도 추가해 갈 예정입니다!
마음에 들면 꼭 사용해주세요!