在vuex中写接口实现数据全局可用

一、
接口：

import request from '@/utils/request'
import store from '../store'
// const luwei = '/training/TraTemplate/queryAll'

// 分页查
export function queryAll(id,pageNum, pageSize) {
  return request({
    url: store.getters.QLMConfig.cg_gateway_url + `/training/TraTemplate/queryAll/${id}/${pageNum}/${pageSize}`,
    // url:store.getters.QLMConfig.cg_gateway_url+`/training/TraTemplate/queryAll/1/1`,
    method: 'get'
  })
}
// 根据id查模板
export function queryTemplateById(id) {
  return request({
    url: store.getters.QLMConfig.cg_gateway_url + `/training/TraTemplate/queryTemplateById/${id}`,
    method: 'get'
  })
}
// 修改模板
export function updateTemplate(data) {
  return request({
    url: store.getters.QLMConfig.cg_gateway_url + '/training/TraTemplate/updateTemplate',
    method: 'post',
    data
  })
}
// 新增模板
export function saveTemplate(data) {
  return request({
    url: store.getters.QLMConfig.cg_gateway_url + '/training/TraTemplate/saveTemplate',
    method: 'post',
    data
  })
}

封装:

import { queryAll, } from "@/api/drill.js";
const store = {
  state: {
    userinfo: {},
  },
  mutations: {
    LOGIN_USER_INFO: (state, obj) => {
      state.userinfo = obj;
    }
  },
  actions: {
    getqueryAll({ commit }, data) {
      return new Promise((resolve, reject) => {
        queryAll(data.form.pageNum, data.form.pageSize)
          .then(response => {
            if (response.retCode == 88888888) {
              commit("LOGIN_USER_INFO", response.data);
              resolve(response)
            } else {
              reject(response.msg)
              throw new Error(response.msg)
            }
          }).catch(error => {
            reject(error);
          });
      });
    }
  }
};
export default store;

调用：

async queryTypeName() {

      this.$store.dispatch('queryTypeName').then(data => {
        // if (json.code == 0) {  //做你任何的逻辑处理
        //   console.log('成功登录')
        // }
        console.log(data.data);
        this.data = data.data
      })
    }

参考：https://www.jianshu.com/p/636ddd80fd4d

二、
接口：

import request from '@/utils/request'
import store from '../store'
// const luwei = '/training/TraTemplate/queryAll'

// 分页查
export function queryAll(id,pageNum, pageSize) {
  return request({
    url: store.getters.QLMConfig.cg_gateway_url + `/training/TraTemplate/queryAll/${id}/${pageNum}/${pageSize}`,
    // url:store.getters.QLMConfig.cg_gateway_url+`/training/TraTemplate/queryAll/1/1`,
    method: 'get'
  })
}
// 根据id查模板
export function queryTemplateById(id) {
  return request({
    url: store.getters.QLMConfig.cg_gateway_url + `/training/TraTemplate/queryTemplateById/${id}`,
    method: 'get'
  })
}
// 修改模板
export function updateTemplate(data) {
  return request({
    url: store.getters.QLMConfig.cg_gateway_url + '/training/TraTemplate/updateTemplate',
    method: 'post',
    data
  })
}
// 新增模板
export function saveTemplate(data) {
  return request({
    url: store.getters.QLMConfig.cg_gateway_url + '/training/TraTemplate/saveTemplate',
    method: 'post',
    data
  })
}

封装:

import { queryAll,queryTemplateById,updateTemplate,saveTemplate } from "@/api/drill.js";

const state = {
  // token: getToken(),
  // name: '',
  // avatar: '',
  // introduction: '',
  // roles: []
}

const mutations = {
  // SET_TOKEN: (state, token) => {
  //   state.token = token
  // },
  // SET_INTRODUCTION: (state, introduction) => {
  //   state.introduction = introduction
  // },
  // SET_NAME: (state, name) => {
  //   state.name = name
  // },
  // SET_AVATAR: (state, avatar) => {
  //   state.avatar = avatar
  // },
  // SET_ROLES: (state, roles) => {
  //   state.roles = roles
  // }
}

const actions = {
  // 分页查
  getqueryAll({ commit }, data) {
    return new Promise((resolve, reject) => {
      queryAll(data.form.id,data.form.pageNum, data.form.pageSize)
        .then(response => {
          if (response.retCode == 88888888) {
            resolve(response)
          } else {
            reject(response.msg)
            throw new Error(response.msg)
          }
        }).catch(error => {
          reject(error);
        });
    });
  },
  // 根据id查模板
  getQueryTemplateById({ commit }, data) {
    return new Promise((resolve, reject) => {
      queryTemplateById(data)
        .then(response => {
          if (response.retCode == 88888888) {
            resolve(response)
          } else {
            reject(response.msg)
            throw new Error(response.msg)
          }
        }).catch(error => {
          reject(error);
        });
    });
  },
  // 修改模板
  updateTemplate1({ commit }, data) {
    // debugger
    return new Promise((resolve, reject) => {
      updateTemplate(data)
        .then(response => {
          if (response.retCode == 88888888) {
            resolve(response)
          } else {
            reject(response.msg)
            throw new Error(response.msg)
          }
        }).catch(error => {
          reject(error);
        });
    });
  },
  // 新增模板
  saveTemplate1({ commit }, data) {
    // debugger
    return new Promise((resolve, reject) => {
      saveTemplate(data)
        .then(response => {
          if (response.retCode == 88888888) {
            resolve(response)
          } else {
            reject(response.msg)
            throw new Error(response.msg)
          }
        }).catch(error => {
          reject(error);
        });
    });
  }

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

调用：

async queryTypeName() {

      this.$store.dispatch('drill/queryTypeName').then(data => {
        // if (json.code == 0) {  //做你任何的逻辑处理
        //   console.log('成功登录')
        // }
        console.log(data.data);
        this.data = data.data
      })
    }