Vue3中调用qs.stringify报错：Cannot read properties of undefined

核心错误原因 #

你遇到的Cannot read properties of undefined (reading 'stringify')错误，本质是组件实例上不存在this.qs这个属性：

• VueAxios的use方法只负责把axios挂载到Vue实例，不会处理额外传入的qs，所以你在main.js里的search.use(VueAxios, axios, qs)写法无效，qs并没有被挂载到组件的this上。

额外语法问题 #

你的params对象里还有一个语法错误：source_table_enum后面缺少逗号，这会直接导致JS解析失败，需要先修正：

let params = {
  "q": this.q,
  "page": this.page,
  "per_page": this.perPage,
  "filters": { 
    "page": {
      "source_table_enum": this.selectedSources, // 补上缺失的逗号
      "topic_id": this.selectedTopics
    }
  }
}

两种可行解决方案 #

方案1：组件内直接导入qs（推荐） #

在Search.vue顶部直接导入qs，无需依赖全局挂载，更符合模块化开发：

<script>
import qs from 'qs' // 直接导入qs

export default {
  // ...其他组件代码
  methods: {
    handleSearch() {
      let params = {
        // ...你的参数定义
      }
      let queryString = qs.stringify(params); // 直接使用qs，无需this
    }
  }
}
</script>

方案2：全局挂载qs到Vue实例 #

如果需要在多个组件里复用qs，可以在main.js里把它挂载到全局属性：

// main.js
import { createApp } from 'vue'
import Search from './Search.vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
import qs from 'qs'

const search = createApp(Search);
search.use(VueAxios, axios);
search.config.globalProperties.$qs = qs; // 全局挂载qs
search.mount('#v_search_app');

然后在组件里通过this.$qs调用：

let queryString = this.$qs.stringify(params);

内容的提问来源于stack exchange，提问作者mcarlson64