vue中使用qs序列化插件

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 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等