vue.js - 使用 laravel paginate() 和 vuex 进行分页，

Question

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

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

在组件中:home

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

我将参数发送给 Action 。

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 inside actions 没有更新。这是第一种方式。所以，我尝试了不同的方法来解决这个问题，如下所示。

在组件中: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 分页的正确使用方法是什么？...

Answer 1

我不确定这样做是否正确。但是解决了。使用我在问题中提到的第一种方式并更新主页组件，如下所示。

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