How to make pagination with Vuex?

Question

Vue.js

Hi everyone, I have a question how to do pagination in vue with vuex
Vuex

export default {
    state: { 
        results: [],
        totalPhotos: 0,
        perPage: 15,
        page: 1
    },
    getters: {
        allPhoto(state) {
            return state.results
        }
    },
    mutations: {
        updatePhotos( state, results ) {
            state.results = results
        }
    },
    actions: {
        async fetchCurrency( ctx, page ) {   
            const options = {
                params: {
                    page: page,
                    per_page: this.perPage
                }
            }
            
            const url = 'https://jsonplaceholder.typicode.com/photos'
    
            const res = await fetch( url, options )

            let results = await res.json()

            console.log( results )

            ctx.commit( 'updatePhotos', results )
        }
    }
}

array output

<template>
    <div>
        <div class="flex">
            <div class="container-block">
                <div class="name" v-for="result in allPhoto" :key="result.id" >
                    <img class="img" :src="result.url" />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { mapGetters } from "vuex"

    export default {
        computed: mapGetters( [ 'allPhoto' ] ),
        async mounted() {
            this.$store.dispatch( 'fetchCurrency' )
        },
    }
</script>

<style scoped>

and the most important component

<template>
    <div>
        <app__loader v-if="loading" />
        
        <div v-else >
            <app__photo/>

            <div class="wrapper">
                <div class="body">
                    <button type="button" class="btn" > {{ previous }} </button>
                    <button type="button" class="btn" > {{ next }} </button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import app__loader from '../under_components/Loader'
    import app__photo from '../under_components/Photo__post'

    export default {
        components: { app__loader, app__photo },
        data() {
            return {
                loading: true,
                carrency: null,
                previous: '<',
                next: '>'
            }
        },
        async mounted() {
            this.carrency =  await this.$store.dispatch( 'fetchCurrency' )
            this.loading = false
        },
    }
</script>

<style lang="scss" scoped>

Answer 1

https://jsfiddle.net/85fzks7h/