Making pagination with laravel paginate() and vuex,

3
votes

I am really having a hard time to solve this problem. Trying to make pagination by using vuex. But I can't update actions when I change the argument value.

For example to go to the next page, I tried a simple way

in component: home 

<button @click="nextPage()">{{currentPage}}</button>

I send the argument to actions. 

mounted(){
    this.$store.dispatch('bridalApi', {currentPage})
},
data(){
    return {
        currentPage: 1,
    };
},
methods: {
    nextPage(){
        this.currentPage++
    }
},

in store.js

I take the argument that I commited. 

actions: {
    bridalApi({commit}, currentPage){  
        axios.get("api/bridal?page=" + currentPage)
        .then(response => {
            commit("setBridals", response.data);  
        })
        .catch(e => {
            console.log(e);
        })
    },
}

it's clearly I can't update the argument inside actions. Because when I click the button, it doesn't go to next page. I mean currentPage inside actions doesn't updated. This was the first way. So, I tried different approach to solve this problem which is like below.

in component: home 

 <button @click="nextPage()">{{pager}}</button>

I set/get the currentPage, and change the state. 

methods: {
    nextPage(){
        this.pager++
    }
},  
computed: {
    ...mapGetters([
        "getBridals",
    ]),          
    pager: {
        set(val){
            this.$store.commit("setPagination", val);
        },
        get(){
            return this.$store.state.bridal.pagination.currentPage;
        }
    },
    bridals() {            
        return this.getBridals;
    },    
},

in Store.js

state: {
    bridals: [],
    pagination: {
        currentPage: 1,
    },
},
mutations: {
    setBridals(state, bridal){
        state.bridals = bridal;
    },
    setPagination(state, pager){
        state.pagination.currentPage = pager;
    },
},
getters: {        
    getBridals(state){
        return state.bridals
    },
},
actions: {
    bridalApi({commit,state}){  
        console.log(state.pagination.currentPage)
        axios.get("api/bridal?page=" + state.pagination.currentPage)
        .then(response => {
            commit("setBridals", response.data);  
        })
        .catch(e => {
            console.log(e);
        })
    },
}

But this way is not working either. And I am very much out of ideas. How can I update the actions? What is the right way to use vuex for pagination?...

3
vue.jsvuex
I guess the missing link in your first approach was that you didn't commit the pagination change in a continous way. Based on your provided code you commit the currentPage once on the mounted event but not further. You should either watch the currentPage variable via a watcher (and commit changes to it as you did in your mountedfunction) or adapt your nextPage() function so that it commits a change to your store on each click. – mynd

3 Answers

1
votes

I am not sure is it's the right way to this. But solved it. Used the first way I mentioned in the question and update home component like below. 

data(){
    return {
        currentPage: 1,
    };
},
watch: {
    currentPage() {
        this.$store.dispatch("bridalApi", this.currentPage);
        console.log("ok")
    }
},
0
votes

You can use a mutation for this like

state:{
 data:[]
}

mutations:{
 SET_DATA:(state , data) => {
  return state.data = data
 }
}

actions: {
    dataApi({commit}, currentPage){
        console.log(currentPage)
        axios.get("http://website.com/api/endpoint?page="+currentPage)
        .then(response => {
            commit('SET_DATA' , response.data)
        })
        .catch(e => {
            console.log(e);
        })
    }
}
0
votes

I would recommend using LaravelVuePagination package for this.

That way you can have something like:

<pagination :data="bridals" @pagination-change-page="getBridals"></pagination>

  export default {
  name: 'BridlaList',
  mounted() {
    this.getBridals();
  },
  methods: {
    getBridals(page = 1){
      this.$store.dispatch('getBridals',{
        page: page
    });
  },
}