2023-7-26

状态管理

导入vuex

创建时直接选vuex

 npm安装vuex

npm install vuex@next --save
//如果是vue2则需要注意版本

npm install vuex@3.6.2 --save

配置文件

 index.js

import Vue from "vue";
import Vuex from 'vuex'
import state from "@/store/state";
import mutations from "@/store/mutations";

Vue.use(Vuex)

export default new Vuex.Store({
    state,
    mutations
});

mutation.js

export default {
    shareMenu(state, data) {
        state.allPermission = data;
    }
}

state.js

export default function(){
    return{
        allPermission:[]
    }
}

main.js

 this.$store引用，任意组件都可以

 分页

  

<el-pagination
        :page-sizes="[2, 4, 6, 8]"
        :current-page="searchPage.current"
        :page-size="searchPage.size"
        :total="searchPage.total"
        layout="->,total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        @next-click="nextPage"
        @prev-click="prevPage">
</el-pagination>

• :page-sizes="[2, 4, 6, 8]": page-sizes 属性定义了每页显示的数据量选项，这里的选项是一个数组，包含了 [2, 4, 6, 8] 四个数字。

• :current-page="searchPage.current": current-page 属性指定当前选中的页码，它与 searchPage 对象中的 current 属性绑定，用于显示当前所在的页码。

• :page-size="searchPage.size": page-size 属性定义每页显示的数据量，它与 searchPage 对象中的 size 属性绑定，用于指定每页要显示的数据数量。

• :total="searchPage.total": total 属性指定了总共的数据量，它与 searchPage 对象中的 total 属性绑定，用于显示总数据量。

• layout="->,total, sizes, prev, pager, next, jumper": layout 属性定义了分页器的布局方式，各个部分之间用逗号分隔。这个布局包含了箭头、总数据量、数据量选择、上一页、页数、下一页和跳转输入框等部分。

• @size-change="handleSizeChange": size-change 事件在用户改变每页数据量选项时触发，它绑定到名为 handleSizeChange 的方法，用于处理每页数据量改变时的逻辑操作。

• @current-change="handleCurrentChange": current-change 事件在用户改变当前页码时触发，它绑定到名为 handleCurrentChange 的方法，用于处理当前页码改变时的逻辑操作。

• @next-click="nextPage": next-click 事件在用户点击下一页按钮时触发，它绑定到名为 nextPage 的方法，用于处理下一页按钮点击时的逻辑操作。

• @prev-click="prevPage": prev-click 事件在用户点击上一页按钮时触发，它绑定到名为 prevPage 的方法，用于处理上一页按钮点击时的逻辑操作。

从后端获取数据

searchPage:{
        total: 0,
        size:2,
        current: 0,
      },


mounted() {
    const params=new URLSearchParams();
    //设置表单数据
    params.set('currentPage','0');
    params.set('size',this.searchPage.size)
    axios.post('http://localhost:9000/permissionList',params)
        .then(res => {
          console.log(res);
          this.permissionList = res.data.data.records;
          this.searchPage.total = res.data.data.total;
          this.searchPage.current = res.data.data.current;
        })
  }

prevPage：向后翻页

prevPage(val) {
      console.log("向后size",this.searchPage.size)
      axios.post('http://localhost:9000/permissionList', qs.stringify({
        currentPage: `${val}`,
        size: this.searchPage.size
      }))
          .then(res => {
            this.permissionList = res.data.data.records;
            this.searchPage.total = res.data.data.total;
            this.searchPage.current = res.data.data.current;
          })
    },

nextPage：向前翻页

nextPage(val) {
      console.log("向前size",this.searchPage.size)
      axios.post('http://localhost:9000/permissionList', qs.stringify({
        currentPage: `${val}`,
        size: this.searchPage.size
      }))
          .then(res => {
            this.permissionList = res.data.data.records;
            this.searchPage.total = res.data.data.total;
            this.searchPage.current = res.data.data.current;
          })
    },

handleSizeChange：切换每页几条记录

handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.searchPage.size= val
      this.searchPage.current=1
      console.log("size",this.searchPage.size)
      axios.post('http://localhost:9000/permissionList', qs.stringify({
        currentPage: this.searchPage.current,
        size:this.searchPage.size
      }))
          .then(res => {
            this.permissionList = res.data.data.records;
            this.searchPage.total = res.data.data.total;
            this.searchPage.current = res.data.data.current;
          })
    },

handleCurrentChange：点击页码

handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.searchPage.current= val
      console.log("size",this.searchPage.size)
      axios.post('http://localhost:9000/permissionList', qs.stringify({
        currentPage: this.searchPage.current,
        size:this.searchPage.size
      }))
          .then(res => {
            this.permissionList = res.data.data.records;
            this.searchPage.total = res.data.data.total;
            this.searchPage.current = res.data.data.current;
          })
    },