vuex中使用axios + ts 请求封装

vuex中axios请求封装

import { createStore } from 'vuex'
import axios from 'axios'

interface ColumnProps {
  _id: string;
  title: string;
  avatar?: string;
  description: string;
}
interface GlobalDataProps {
  columns: ColumnProps[];
}

// axios
const getAndCommit = async (url: string, mutationName: string, commit: Commit) => {
  const { data } = await axios.get(url)
  commit(mutationName, data)
  return data
}
const postAndCommit = async (url: string, mutationName: string, commit: Commit, payload: any) => {
  const { data } = await axios.post(url, payload)
  commit(mutationName, data)
  return data
}

export const store = createStore<GlobalDataProps>({
  state: {
    columns: []
  },
  // 计算属性
  getters: {},
  // 同步方法
  mutations: {
    fetchColumns(state, rawData) {
      state.columns = rawData.data.list
    },
  },
  // 异步方法
  actions: {
  	// 方法1
    fetchColumns({ commit }) {
      axios.get('columns').then(res => {
        commit('fetchColumns', res.data)
      })
    }
    // 方法2
    async fetchColumns1({ commit }) {
      const { data } = await axios.get('columns')
      return commit('fetchColumns', data)
    }
    // 方法3
    fetchColumns2({ commit }) {
      return getAndCommit('columns', 'fetchColumns', commit)
    }
  }
})