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);
}),
};