[JavaScript知识库]axios以及vuex api请求之携带参数的问题

Vuex api? ?get和post请求携带参数

get请求

api接口 单个参数

api? -> index.js

方法一：

export function reqTopSong(type){
	return request({
		url:'/top/song',
		method:'get',
		params:{
			type
		}
	})
}

?方法二：

export function reqTopSong(params){
	return request({
		url:'/top/song',
		method:'get',
		params
	})
}

store -> index.js

	async getTopSong({commit},params={}){
//当前这个getTopSong这个函数在调用获取服务器数据的时候，至少传递一个参数（空对象）
    //params形参：是当用户派发action的时候，第二个参数传递过来的，至少是一个空对象
		const res = await reqTopSong(params)
		console.log(res)
		if(res.code == 200){
			commit('TOPSONG',res.data)
		}
	},

page -> index.vue

方法一：

TopSong() {
				this.$store.dispatch('getTopSong', this.type)
				// let res = await this.$api.reqTopSong(this.type)
			},

方法二：

async TopSong() {
				await this.$store.dispatch('getTopSong', {type:this.type})
			},

api接口 多个参数

?api? -> index.js

export function reqTopAlbum(params){
	return request({
		url:'/top/album',
		method:'get',
		params
	})
}

store -> index.js

	async getTopSong({commit},params={}){
		const res = await reqTopSong(params)
		console.log(res)
		if(res.code == 200){
			commit('TOPSONG',res.data)
		}
	},

page -> index.vue

await this.$store.dispatch('getTopAlbum', {
						offset: this.offset,
						limit: this.limit,
						year: this.topAlbumYear,
						month: this.topAlbumMonth
					})

post请求

api接口 单个参数

跟get的单个参数的 方法一 一样

api接口 多个参数

?api? -> index.js

export function reqUserRegister(params){
	return request({
		url:'/user/passport/register',
		method:'post',
		data:params
	})
}

store -> index.js

  async userRegister({ commit }, user) {
    let result = await reqUserRegister(user);
    if (result.code == 200) {
      return "ok";
    }
  },

page -> index.vue

 async userRegister() {
       let res = await this.$store.dispatch("userRegister", {
            phone,
            code,
            password,
          });
  },