封装action 请求

封装actions 发送请求

export const asyncAndCommit = async (url: string, mutationName: string,
  commit: Commit,
  config: AxiosRequestConfig = { method: 'get' },
  extraData?: any) => {
  const newConfig: ICustomAxiosConfig = { ...config, mutationName }
  const { data } = await axios(url, newConfig)
  if (extraData) {
    commit(mutationName, { data, extraData })
  } else {
    commit(mutationName, data)
  }
  return data
}

在项目中的使用

  mutations: {
    fetchTemplates (state, { data, extraData }) {
      const { pageIndex, searchText } = extraData
      const { list, count } = data.data
      if (pageIndex === 0) {
        state.templates = list
      } else {
        state.templates = [...state.templates, ...list]
      }
      state.totalTemplates = count
      state.searchText = searchText || ''
    },
    fetchTemplate (state, { data }) {
      state.templates = [data]
    },
    fetchWorks (state, { data, extraData }) {
      const { pageIndex, searchText } = extraData
      const { list, count } = data.data
      // if (pageIndex === 0) {
      //   state.works = list
      // } else {
      //   state.works = [...state.works, ...list]
      // }
      state.works = list
      state.totalWorks = count
      state.searchText = searchText || ''
    },
    createWork (state, { data }) {
      state.works.unshift(data)
    },
    deleteWork (state, { extraData }) {
      state.works = state.works.filter(work => work.id !== extraData.id)
    },
    recoverWork (state, { extraData }) {
      state.works = state.works.filter(work => work.id !== extraData.id)
    },
    transferWork (state, { data, extraData }) {
      if (data.errno === 0) {
        state.works = state.works.filter(work => work.id !== extraData.id)
      }
    },
    fetchStatic (state, { data, extraData }) {
      const list = data.data
      const { name, id } = extraData
      state.statics.push({ name, id, list })
    },
    clearStatic (state) {
      state.statics = []
    }
  },

  actions: {
    fetchTemplates ({ commit }, queryObj = { pageIndex: 0, pageSize: 8, title: '' }) {
      if (!queryObj.title) {
        delete queryObj.title
      }
      const queryString = objToQueryString(queryObj)
      return asyncAndCommit(`/templates?${queryString}`, 'fetchTemplates', commit, { method: 'get' }, { pageIndex: queryObj.pageIndex, searchText: queryObj.title })
    },
    fetchTemplate ({ commit }, id) {
      return asyncAndCommit(`/templates/${id}`, 'fetchTemplate', commit)
    },
    fetchWorks ({ commit }, queryObj = { pageIndex: 0, pageSize: 8, title: '' }) {
      if (!queryObj.title) {
        delete queryObj.title
      }
      const queryString = objToQueryString(queryObj)
      return asyncAndCommit(`/works?${queryString}`, 'fetchWorks', commit, { method: 'get' }, { pageIndex: queryObj.pageIndex, searchText: queryObj.title })
    },
    deleteWork ({ commit }, id) {
      return asyncAndCommit(`/works/${id}`, 'deleteWork', commit, { method: 'delete' }, { id })
    },
    createWork ({ commit }, payload: WorkProp) {
      return asyncAndCommit('/works', 'createWork', commit, { method: 'post', data: payload })
    },
    fetchStatic ({ commit }, queryObj) {
      const newObj = { category: 'h5', action: 'pv', ...queryObj }
      const queryString = objToQueryString(newObj)
      return asyncAndCommit(`${baseStaticURL}/api/event?${queryString}`, 'fetchStatic', commit, { method: 'get' }, { name: queryObj.name, id: queryObj.label })
    },
    recoverWork ({ commit }, id) {
      return asyncAndCommit(`/works/put-back/${id}`, 'recoverWork', commit, { method: 'post' }, { id })
    },
    transferWork ({ commit }, { id, username }) {
      return asyncAndCommit(`/works/transfer/${id}/${username}`, 'transferWork', commit, { method: 'post' }, { id })
    }
  },