背景：

<script>方式引入了 vue elementui axios 并非vue-cli项目

html结构
`

           <script src="../../Content/Table/js/axios.js"></script>
           
           <div class="pagination">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage" :page-size="size" layout="total, sizes,jumper,->,prev, pager, next"
                :total="100"></el-pagination>
        </div>
        
        
        <script>
    new Vue({
    el: '#app',
    data: function () {
        return {       
            currentPage: 1,
            size: 10,
            form: {
                roleName: "",
                value2: "",
                name: 2,
                pro: 2
            }

        }
    },
   
    methods: {
        //翻页
        handleCurrentChange(currentPage) {
            this.currentPage = currentPage;
            console.log(currentPage);
            let size = this.size;
            params = { currentPage, size }
            window.$query('http://192.168.1.131:81/sys/sysUser/getDataList', params).then(res => {
                console.log("分页查询返回值2222", res.data);
            }).catch(err => {
                console.log(err);
            });
        },
        //更改每页条数
        handleSizeChange(size) {
            this.size = size;
            this.currentPage = 1;
            let currentPage = this.currentPage;
            params = { currentPage, size }
            window.$query('/sysUser/getDataList', params).then(res => {
                console.log("分页查询返回值2222", res.data);
            }).catch(err => {
                console.log(err);
            });
        },
        //查询
        handleQuery() {
            console.log(this.form);
            let form = this.form;
            window.$query('/sysUser/getDataList', { query: form }).then(res => {
                console.log("分页查询返回值2222", res.data);
            }).catch(err => {
                console.log(err);
            });
        },
       
      
    }
})

</script>

`

axios.js

`

(function (win) {
var Request = axios.create({
    timeout: 10000
})
// axios.defaults.headers.token = "";


Request.interceptors.request.use((config) => {
    console.log(config);
    return config;
})

Request.interceptors.response.use((response) => {
    console.log(response);
    return response;
}, (err) => {
    console.log(err);
    return err;
})

win.$request = Request;

win.$query = function (url = '', params = null){
    var currentPage = 1;
    var size = 10;
    var queryParams={};
    // console.log(123,params);
    if (params) {
        // 传入查询参数时需要重置currentPage
        currentPage = 1;
        queryParams = Object.assign({}, params);// 缓存查询参数
      }
      var data = Object.assign({}, queryParams, {
        size:params.size,
        currentPage:params.currentPage 
      });
      console.log("全局查询参数",data);
      return $request.post(url, data).then((res) => {
        return res;
      });


}

})(window)
`

因为不是脚手架的项目 所以没有办法用mixins方式混入到组件中，目前只能这样写

想要实现的需求是

如果有查询条件，给后台传递的参数是
{
"currentPage": 1,
"query": {

"userName": "lomo",
"enabled": 1,
"sex": 1

},
"size": 10,
"sort": {}
}
并且 带查询条件查询之后 每次翻页的时候 还需要带着查询条件
如果没有查询条件
{
"currentPage": 1,
"size": 10,
}

但是目前这种写法 有查询条件的时候 currentPage size 都是undefined

而且感觉写的有点繁琐 希望能精简优化一下

求教如何改造

我的想法是 如果axios.js 能访问 html里面 vue data里的size currentPage就好了