Vue3 element-plus分页与后端接口连接（解决点击页码不渲染页面）

记录一下自己毕业设计中遇到的问题—分页

这是element-plus的分页组件

<el-pagination
        background
        layout="prev, pager, next"
        :total="300"
        :page-size="16"
        @current-change="handleCurrentChange"
        :current-page="currentPage">
    </el-pagination>

官方文档给出的解释是：
设置layout，表示需要显示的内容，用逗号分隔，布局元素会依次显示。prev表示上一页，next为下一页，pager表示页码列表，除此以外还提供了jumper和total，size和特殊的布局符号->，->后的元素会靠右显示，jumper表示跳页元素，total表示总条目数，size用于设置每页显示的页码数量。

后端接口我采用的是Nodejs和sequelize

app.get('/page/:currentPage',async (req,res)=>{
  
    let {currentPage} = req.params;
    let countPerPage = 16;
    const goods = await models.good.findAll({
      attributes: ['id', 'name','img', 'price','shop'],
      order: [
        ['id']
      ],
      limit: countPerPage, // 每页多少条
      offset: countPerPage * (currentPage - 1) // 跳过多少条
    })
    
        res.json({
            goods,
           
        })
  
})

在分页组件中绑定点击事件handleCurrentChange和currentPage

		@current-change="handleCurrentChange"
        :current-page="currentPage"

然而在点击换页之后，通过console.log(currentPage)我在控制台中看到currentPage值发生了变化，但是页面没有重新渲染，在网上看了很多博客也没有解决。

最终解决办法

我想到了可以把currentPage注册到全局属性中，然后点击之后直接在全局中修改，成功解决点击页码后不跳转的问题。

state：
currentPage: 1

在mutations中传递参数
mutations：
handleCurrentChange(state,val){ state.currentPage = val; console.log(this.state.currentPage)

methods：
handleCurrentChange(val){ this.$store.commit("handleCurrentChange",val) window.location.reload() },
点击页码后刷新页面重新渲染页面

成功解决问题