vue 多个页面调同一个接口，传不同的参数，使用 Vuex 来实现传不同参数调统一接口

1、在 api 文件夹下的 api.js 下

import https from "@/utils/axios";   // 引入在 utils下的 axios.js 中封装的请求

export const pageOfInfoAtES = function(params) {
  let url = "/xxx/pageOfInfoAtES";
  return https(url, params, "post");
};

下方是我微信公众号的二维码，可以扫码关注以下，后期博文推送主要在公众号上面，有什么问题也可以通过公众号跟我发消息哦~

2、在 store文件夹下的 modules文件夹下新建 getInfo.js

// store -> modules -> getInfo.js
import { pageOfInfoAtES } from "@/api/api.js";     // 引入api中 导出的接口

export default {
  namespaced: true,  // 命名空间
  state: {
    dataList: [] //返回的数据
  },
  mutations: {
    changeDataList(state, payload) {
      state.dataList = payload;
    }
  },
  actions: {
    async getDataInfo(context, payload) {
      const res = await pageOfInfoAtES({ data: payload });  // await会等到执行结果（请求接口返回的数据）出来才会执行后面的语句（await 须在 async 中使用） 
      if (res.code == 0) {
        context.commit("changeDataList", res.data);
        return true;
      }
      return false;
    }
  }
};

3、在 store文件夹下 index.js 中引入 getInfo.js

import getInfo from "./modules/getInfo";
export default new Vuex.Store({
  modules: {
      getInfo
  },
});

4、使用：

（1）使用 async 和 await

<script>
export default {
  data() {
    return {
      List: [],
    };
  },
  created(){
  	this.getData();
  },
  methods: {
  	// 使用async 和 await，因为 给 dataList 赋值需要等到请求完成之后，触发了getInfo.js中的dataList更改之后再赋值给List
    async getData(jobName, jobId) {
      this.List= [];
      let params = {
        page: 1,
        size: 5,
      }
      await this.$store.dispatch('getInfo/getDataInfo', params)  // getInfo.js 中使用了命名空间，所以 需要在dispatch的时候在 getDataInfo前面加上moduleName
      this.List= JSON.parse(JSON.stringify(this.$store.state.getInfo.dataList))
      // console.log(this.dataList, 11)
    },
  }
}
</script>

（2）使用 promise

<script>
export default {
  data() {
    return {
      List: [],
    };
  },
  created(){
  	this.getData();
  },
  methods: {
	getData() {
      this.List= [];
      const pro = new Promise((resolve, reject) => {
        let params = {
          page: 1,
          size: 5,
        }
        resolve(this.$store.dispatch('getInfo/getDataInfo', params))  // 在 getInfo.js 中 actions 里的 异步请求 getDataInfo 返回的是 true 或 false
      })

      pro.then((val) => {   // 此处的 val 是上面 resolve() 的返回值，通过判断返回值来给 List赋值
        if (val) {   
          this.List= JSON.parse(JSON.stringify(this.$store.state.getInfo.dataList))
          // console.log(this.List)
        }
      })
    },
  }
}