qs模块是？

qs是可以用来将字符串解析和序列化字符串的库。

1.下载： 

npm install -save qs

2.引入：

• 局部引入(使用的页面直接引入)

        import qs from 'qs'; 

• 全局引入 

        vue2.0 中，入口文件main.js配置Vue.prototype挂载全局方法对象：

//引入：
import Vue from 'vue'
import Axios from 'axios'
import App from './App.vue'

// ...

/* 挂载全局对象 */
Vue.prototype.$http = Axios;
Vue.prototype.$qs = qs;
// ...

        vue3. 中取消了Vue.prototype，在全局挂载方法和属性时，需要使用官方提供的globalPropertiesAPI。 

//引入：
import { createApp } from 'vue''
import App from './App.vue'
import router from './router/index'
import axios from './utils/axios'
import qs from 'qs'

const app = createApp(App)
app.config.globalProperties.$axios = axios;
app.config.globalProperties.$qs = qs;
app.use(router)
app.mount('#app')

 3.使用：

vue2.0中使用   this.$qs 

vue3.0中使用 

import {reactive,toRefs,getCurrentInstance} from 'vue';
export default {
    name:'Header',
    setup() {
        const { proxy } = getCurrentInstance()
        const data = reactive({
            name:'lili',
            age:20,
            address:{
                provide:'河北省',
                city:'沧州市',
                newAdd:'北京市昌平区'
            },
            comData:[
                {label:'111',value:1},
                {label:'222',value:2},
                {label:'333',value:3}
            ]
        })
        const getData=()=>{
            let allData =proxy.$qs.stringify(data);
            console.log(allData);
            console.log(proxy.$qs.parse(allData))
        }
        return{
            getData
        }
    },
    mounted() {
        this.getData();
    },

 输出：

 

 

4.总结: 

qs.parse()    将URL解析成对象的形式

qs. stringify()   将对象序列化成URL的形式以&进行拼接