使用 laravel paginate() 和 vuex 进行分页，答案

【问题标题】：Making pagination with laravel paginate() and vuex,使用 laravel paginate() 和 vuex 进行分页，
【发布时间】：2020-03-18 01:53:14
【问题描述】：

我真的很难解决这个问题。尝试使用 vuex 进行分页。但是当我更改参数值时，我无法更新操作。

例如转到下一页，我尝试了一个简单的方法

在组件中：home

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

我将参数发送到操作。

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

在 store.js

中

我接受我提出的论点。

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

很明显，我无法更新 actions 中的参数。因为当我单击按钮时，它不会转到下一页。我的意思是 currentPage 里面的动作没有更新。这是第一种方式。所以，我尝试了不同的方法来解决这个问题，如下所示。

在组件中：home

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

我设置/获取当前页面，并更改状态。

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

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

但是这种方式也行不通。而且我非常没有想法。如何更新操作？使用vuex进行分页的正确方法是什么？...

【问题讨论】：

我猜您的第一种方法中缺少的链接是您没有以连续的方式提交分页更改。根据您提供的代码，您在 mounted 事件上提交 currentPage 一次，但不再提交。您应该通过观察者观察currentPage 变量（并像在mounted函数中所做的那样提交对它的更改）或调整您的 nextPage() 函数，以便它在每次点击时提交对您的商店的更改。跨度>

标签： vue.js vuex

【解决方案1】：

我不确定这是否是正确的方法。但是解决了。使用了我在问题中提到的第一种方式，并像下面这样更新 home 组件。

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

【讨论】：

【解决方案2】：

您可以使用mutation 来表示喜欢

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

【讨论】：

是的，当然我正在使用 then() 内的数据突变，但问题是 currentPage 的值始终保持在 action 内，尽管它正在更改的组件中
您要更新 currentPage 还是要设置对 vuex 商店的响应？
我正在更改组件内currentPage 的值并将其发送到操作...是的，我想更新currentPage 在操作内的值。

【解决方案3】：

我建议为此使用LaravelVuePagination package。

这样你就可以得到类似的东西：

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

【讨论】：