I am building the shop search project.
I have two shop types in Product collection.
The types are Supermarket and Restaurant.
In my menu.js file, I am setting the type in actions section, then I am showing the results in the Result.vue file.
When Result.vue is loaded, setMenuRef in menu.js is dispatched and the information is pushed into the array named getMenuItems.
If I press the supermarket button in Buttons.vue component, the current type is set to be Supermarket and then, I can see the results of shops which are categorized as Supermarket.
And if I press the restaurant button, I can see the results of shops which are categorized as Restaurant. The both methods are same.
What I want to achieve is, to add the loading functions for showing
the next 8 results in the each result page.
I am searching the multiple websites to add the loading functions in vuexfire code. But I could not see what an approach is the best.
In Result.vue, I used the method for loading the new results. The method name is nextPage.
The logic in menu.js is bit complicated. Please feel free to ask me about the further information.
menu.js
import { firestoreAction } from 'vuexfire'
import fireApp from '@/plugins/firebase'
const firebase = require("firebase");
require("firebase/firestore");
const db = firebase.firestore();
const dbMenuRef = db.collection('Product').where("saleStatus", "==", 1).limit(8)
const state = {
currentType: 'menu',
menuItems:[],
store:[],
supermarketItems:[],
restaurantItems: []
}
const getters = {
currentType: state => state.currentType,
getMenuItems: state => state.menuItems,
supermarketItems: state => state.supermarketItems,
restaurantItems: state => state.restaurantItems
}
const mutations = {
setCurrentType(state, type) {
state.currentType = type
},
showSupermarketResult(state, supermarket) {
state.supermarketItems.push(supermarket);
},
showRestaurantResult(state, restaurant) {
state.restaurantItems.push(restaurant);
},
}
const actions = {
setMenuRef: firestoreAction(context => {
return context.bindFirestoreRef('menuItems', dbMenuRef)
}),
setCollectionType: ({ commit, state }, type) => {
commit('setCurrentType', type)
const mutations = {
Supermarket: 'showSupermarketResult',
Restaurant: 'showRestaurantResult'
}
const states = {
Supermarket: 'supermarketItems',
Restaurant: 'restaurantItems'
}
if (state[states[type]].length) return
const collectionRef = db.collection('Product').where("saleStatus", "==", 1).where('type', '==', type).limit(8)
collectionRef.get()
.then(snapshot => {
if (snapshot.empty) {
console.log('No matching documents.');
return;
}
snapshot.forEach(doc => {
const data = doc.data()
commit(mutations[type], data)
});
})
.catch(err => {
console.log('Error getting documents', err);
});
},
}
export default {
state,
mutations,
getters,
actions
}
Result.vue
<template>
<div class="result-body">
<Navbar class="Navbar"/>
<NavbarMobile class="NavbarMobile" />
<Map />
<Buttons />
<b-container v-if="currentType === 'menu'" class="result-container">
<b-row class="result-row ">
<b-col md="6" v-for="(item, index) in getMenuItems" :key="index" class="container-result ">
<div class="check d-flex flex-wrap flex-row " v-if="item.remainingQuantity >= 0">
<b-col cols="3" class="data">
<b-list-group class="list">
<div href="#" class="flex-column align-items-start">
<div class="d-flex justify-content-between">
<div class="item sale">
<div class="line">
<span class="initial">{{ item.initial }}</span> <br>
</div>
<span class="price">{{ item.sale }}</span>
</div>
</div>
</div>
<div href="#" disabled class="flex-column align-items-start limit-area">
<div class="d-flex justify-content-between">
<div class="item limit">
<div class="position">
Until <br>{{ item.limitObject }}
</div>
</div>
</div>
</div>
</b-list-group>
</b-col>
<b-col cols="9">
<div v-if="item.remainingQuantity == 0">
<b-overlay :show="show" class="overlay" variant="dark" :opacity="opacity" :blur="blur" spinnerType="false">
<div class="image-card">
<router-link :to="{name:'Product',params:{id:item.id}}">
<div class="img" v-for="(sample, index) in item.sample" :key="index">
<b-img class="storefront" :src="sample" alt="Image 3"></b-img>
</div>
</router-link>
<div class="card__content">
<div class="card__info">
<span class="business float-left">{{ item.business }}</span>
<span class="quantity float-right">{{ item.remainingQuantity }} left</span>
</div>
</div>
</div>
</b-overlay>
</div>
<div v-else>
<div class="image-card">
<router-link :to="{name:'Product',params:{id:item.id}}">
<div class="img" v-for="(sample, index) in item.sample" :key="index">
<b-img class="storefront" :src="sample" alt="Image 3"></b-img>
</div>
</router-link>
<div class="card__content">
<div class="card__info">
<span class="business float-left">{{ item.business }}</span>
<span class="quantity float-right">{{ item.remainingQuantity }} left</span>
</div>
</div>
</div>
</div>
</b-col>
</div>
</b-col>
</b-row>
</b-container>
<b-container v-if="currentType === 'Restaurant'" class="result-container">
<b-row class="result-row-restaurant ">
<b-col md="6" v-for="(item, index) in restaurantItems" :key="index" class="container-result ">
<div class="check d-flex flex-wrap flex-row " v-if="item.remainingQuantity >= 0">
<b-col cols="3" class="data">
<b-list-group class="list">
<div href="#" class="flex-column align-items-start">
<div class="d-flex justify-content-between">
<div class="item sale">
<div class="line">
<span class="initial">{{ item.initial }}</span> <br>
</div>
<span class="price">{{ item.sale }}</span>
</div>
</div>
</div>
<div href="#" disabled class="flex-column align-items-start limit-area">
<div class="d-flex justify-content-between">
<div class="item limit">
<div class="position">
Until <br>{{ item.limitObject }}
</div>
</div>
</div>
</div>
</b-list-group>
</b-col>
<b-col cols="9">
<div v-if="item.remainingQuantity == 0">
<b-overlay :show="show" class="overlay" variant="dark" :opacity="opacity" :blur="blur" spinnerType="false">
<div class="image-card">
<router-link :to="{name:'Product',params:{id:item.id}}">
<div class="img" v-for="(sample, index) in item.sample" :key="index">
<b-img class="storefront" :src="sample" alt="Image 3"></b-img>
</div>
</router-link>
<div class="card__content">
<div class="card__info">
<span class="business float-left">{{ item.business }}</span>
<span class="quantity float-right">{{ item.remainingQuantity }} left</span>
</div>
</div>
</div>
</b-overlay>
</div>
<div v-else>
<div class="image-card">
<router-link :to="{name:'Product',params:{id:item.id}}">
<div class="img" v-for="(sample, index) in item.sample" :key="index">
<b-img class="storefront" :src="sample" alt="Image 3"></b-img>
</div>
</router-link>
<div class="card__content">
