开发者问题收集

如何在 Vue 3 中使用 qs.stringify?

2022-07-11
2031

我尝试使用 qs stringify 在 Vue Axios 调用中编码 URL 参数。在我的 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, qs);
search.mount('#v_search_app');

然后在 Search.vue 中,我有以下内容:

let params = {
  "q": this.q,
  "page": this.page,
  "per_page": this.perPage,
  "filters": { 
    "page": {
      "source_table_enum": this.selectedSources
      "topic_id": this.selectedTopics
    }
  }
}
let queryString = this.qs.stringify(params);

这会导致以下错误:

Uncaught TypeError:无法读取未定义的属性(读取“stringify”)

我做错了什么?

2个回答

在您的 Search.vue 中,您应该执行以下操作:

import qs from 'qs'
let queryString = qs.stringify(params)

您必须将该库导入到您想要使用它的组件中。

Duannx
2022-07-12

除了答案 ( https://stackoverflow.com/a/72946301/2512022 ) 之外,为了正确使用该库,您还需要将软件包安装到您的项目中。

操作方法:

在应用程序的根目录中,在终端/命令行中运行以下命令

npm install qs
ScottyG
2023-03-13