vue.js - 请问vuex下一页功能如何写

问题描述

问 题

第一次尝试vuex,页面打开时,获取数据成功,page的0是默认第一页,我想点击按钮,page+1,然后再重新获取第二页的数据,这样该怎么写?现在只是page可以+,但是没有获取数据,不知道如何再去触发GET_C_NAME

import {
    GET_C_NAME,
    NEXT_CURRENTPAGE} from './../types'

const state = {
    page: 0,
    lists:[]
}

const mutations = {
    [GET_C_NAME](state,action){
        state.lists=action.community_name[state.page]

    },
    [NEXT_CURRENTPAGE](state,action){
        state.page++
    }
}

export default {
    state,
    mutations
}

这个问题已被关闭，原因：已解决

解决方案

首先，无论获取数据的方式是同步还是异步，都应该写在action里，但你贴出来的代码，我们看到有action，关于这么写action，看文档action

其次，你要做的是：

1. 在你的组件里监听按钮的click事件，用v-on:click这个玩过吧！

2. 然后调用获取下一页数据的action(没写赶紧去写吧)，至于到底是加1还是加几，随你便

3. 在action里，将拿到的数据传给dispatch给相应的mutation方法

4. 在mutation方法里，修改state，结束

这篇关于vue.js - 请问vuex下一页功能如何写的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！