Nuxt.js ＋ Firebase ＋ VuexFireでデータ表示をソートする

5219 ワード
Firebase Firestore VuexFire Vue.js nuxt.js Vue.js テキストリンク

Nuxt.js+Firebaseの勉強を始めたばかりです。
FirestoreのデータをWebページに表示できるようになりました。

前回： FirebaseのセキュリティルールをWHEREのように使えると思っていた

やりたいこと

Firestoreのデータを取得してWebページに表示するためにVuexFireを利用しています。今回は、画面の表示内容をソートしたいです。

環境

  • Firebase 7.3.0
  • Vue CLI 4.0.5
  • Nuxt.js 2.10.2
  • VuexFire 3.2.0

順序の設定はorderByを使う

Firestoreの構成は次の通りです。

コレクション ドキュメント サブコレクション フィールド
notes (uid) pages title

サブコレクションをtitleの降順にするため、 .orderBy('title', 'desc') としています。

  • ~/pages
    • index.vue
  • ~/store
    • index.js
pages/index.vue
    <v-flex
      v-for="page in pages"
      xs12 mb-2>
      <v-card>
        <v-card-text>
          {{page.title}}
        </v-card-text>
      </v-card>
    </v-flex>

  computed: {
    ...mapGetters({ pages: 'getPages' }),
  },
  mounted () {
    let userID = this.$store.getters['auth/getUid'];
    this.$store.dispatch(
      'setPagesRef',
      db.collection('notes').doc(userID)
      .collection('pages').orderBy('title', 'desc'));
  },
store/index.js
import { vuexfireMutations, firestoreAction } from 'vuexfire';
import createPersistedState from "vuex-persistedstate";

export const state = () => ({
      pages: [],
    });

export const mutations = {
      ...vuexfireMutations
    };

export const getters = {
      getPages: (state) => {
        return state.pages;
      },
    };

export const actions = {
      nuxtClientInit ({ commit, state, dispatch }, { req }) {
        createPersistedState()(this);
      },
      setPagesRef: firestoreAction(({ bindFirestoreRef }, ref) => {
        bindFirestoreRef('pages', ref);
      }),
    };
1.2.1 APK逆コンパイルツール之:ApkTool+dex 2 jar+jd-gui
26. Remove Duplicates from Sorted Array Leetcode Python