全局 API 調用 Vue.js

Question

我在創建包含 API 的全局變量時遇到問題。 我需要在我的整個應用程序中使用這個變量，所以在時機成熟時更改 API 鏈接會更容易。 我怎樣才能做到這一點？ 到目前為止，我已經完成了以下工作：

創建了一個名為 config.js 的文件

const baseURL = 'http://myapi'

export default {
    baseURL
}

我正在使用 Vuex 進行 api 調用，因此我嘗試接收數據的部分在我的商店中看起來像這樣：

import baseURL from '../../../config.js'

    async fetchStaff({ commit }, id, baseURL) {
    if (id === undefined) {
        const response = await axios.get(baseURL + `/employee/staff`, { headers: { Authorization: `Bearer ${sessionStorage.getItem('token')}` } });
        commit('setStaff', response.data);
        // eslint-disable-next-line no-console
        console.log(response.data)
    } else {
        const response = await axios.get(baseURL + `/employee/${id}`, { headers: { Authorization: `Bearer ${sessionStorage.getItem('token')}` } });
        commit('setStaff', response.data);
    }
},

baseURL 在商店中未定義。 有人可以指出這里的錯誤嗎？

Answer 1

配置文件

// Bases
export const baseURL = 'http://myapi'

// Endpoints
export const api_1 = '/api1'
export const api_2 = param1 => `/api2/ + ${param1}`

商店.js

// import apis you want to use this file.
import { baseURL, api_1 } from '../../../config.js'

Answer 2

首先，您要在 config.js 中導出一個對象。 所以如果你像下面這樣導入它：

import baseURL from '../../../config.js'

然后你會得到整個配置對象。 相反，您可以通過執行以下操作導入 baseURL 變量：

import { baseURL } from '../../../config.js'

其次，在這一行：

異步 fetchStaff({ commit }, id, baseURL )

baseURL 被識別為參數。 這就是為什么它總是沒有 value 或undefined ，我建議將它從函數參數中刪除。 所以它可能如下所示：

import { baseURL } from '../../../config.js'


async fetchStaff({ commit }, id) {
    if (id === undefined) {
        const response = await axios.get(baseURL + `/employee/staff`, { headers: { Authorization: `Bearer ${sessionStorage.getItem('token')}` } });
        commit('setStaff', response.data);
        // eslint-disable-next-line no-console
        console.log(response.data)
    } else {
        const response = await axios.get(baseURL + `/employee/${id}`, { headers: { Authorization: `Bearer ${sessionStorage.getItem('token')}` } });
        commit('setStaff', response.data);
    }
},

謝謝