vue中使用qs序列化插件以及qs.stringify()和qs.parse()用法

1.什么是qs插件？

具有一些附加安全性的querystring解析和字符串化库。

首席维护者：​​Jordan Jordan​​

在QS模块最初创建和维护​​TJ Holowaychuk​​。

2.安装插件：

npm install qs

如果你想全局不用那么麻烦的引用，在main.js中引用即可：

npm install qs -S
 
mian.js引入：
import qs from 'qs';
Vue.prototype.$qs = qs //即可直接使用  this.$qs

3.用法：

参数形式不是json的时候
还有一种参数形式是form-data 的时候硬formData的传参形式

(1)qs.parse()是将URL解析成对象的形式
(2)qs.stringify()是将对象序列化成URL的形式，以&进行拼接

比如：

var Lk = {year: '2021',month: '01'};
qs.stringify(LK);
console.log(qs.stringify(LK));
//'year=2021&month=01'

示例：

var expected = {
    a: {
        b: {
            c: {
                d: {
                    e: {
                        f: {
                            '[g][h][i]': 'j'
                        }
                    }
                }
            }
        }
    }
};
var string = 'a[b][c][d][e][f][g][h][i]=j';
assert.deepEqual(qs.parse(string), expected);

vue中参考用例：

//页面引入
            import qs from 'qs';

            //获取设备列表
            handleDataList() {
                let _this = this,
                    queryParams = {
                        page: _this.page,
                        limit: _this.limit,
                        skname: _this.sname,
                        soprt: _this.sort,
                        plyanId: _this.dataForm.plan
                    };
                if (_this.dataForm.status.length > 0 && !_this.dataForm.status.includes(null)) {
                    queryParams['delviceStatus'] = _this.dataForm.status.join(',');
                }
                if (_this.dataForm.devname) {
                    queryParams["devlname"] = _this.dataForm.devname;
                }
                _this.paginationShow = false;
                _this.dataListLoading = true;
                _this.dataList = [];
                _this.total = 0;
                if (_this.dataForm.logger.length > 0) {
                    queryParams["loggkerId"] = _this.dataForm.logger.join(",");
                    _this.$http.get("/person/xiaxiedejiekou", qs.stringify(queryParams)).then(({data: res}) => {
                        console.log(res);
                    });
                } else {
                    _this.dataListLoading = false;
                    return _this.$message.error("请先选择!")
                }
            },

4.参考：

[1].​​npm qs官网​​

[2].​​JS中的序列化与反序列化​​

[3].​​vue 搭建框架到安装插件依赖，Element、axios、qs等​​