axios – 育心文具行

axios 套件介紹，請參考這裡。

這是一個很好用的 AJAX 套件，目前有兩個需求：

需要一個統一的前置作業，例如 baseUrl 設定、timeout 設定等等。
需要避免每個 router 的 template 有用到就創建一個實例。
未來其他功能套件，想要讓各種設定儘量在同一個地方都找得到。

所以這邊選擇一個封裝和單例的實作來處理。因為網路上找到的作法實在太多，又初學導致一直碰壁，這邊記錄下目前認為最恰當的方法，參考這裡（雖然說文章內建議的方法是使用 ES modules）：

首先確定安裝好 axios 套件，這邊使用 npm 安裝：

npm install axios

確保有安裝 Pinia 套件，參考這裡：

npm install pinia

建立一個 plugins 外掛集合，透過 pinia 存在全域。注意未來如果有其他套件，建議拉一個資料夾管理並確實作好 import：

# src/composables/plugins.js
import axios from 'axios'
import { defineStore } from "pinia";

export const useAppPlugins = defineStore({
  id: "appPlugins",
  state: () => {
    return {
      axios : axios.create({
        baseURL: '',  
        timeout: 10000  
      })
    }
  }
});

使用上，引用 plugins.js 中把要用的外掛都抓進來，就可以直接使用了：

<script>
import { useAppPlugins } from '@/composables/plugins.js';
const appPlugins = useAppPlugins();

export default {
	data(){
		return {
			...
		}
	},
	mounted() {
		...
	},
	beforeUnmount() {
		...
	},
	methods: {
		submitForm: () => {

			let api = appPlugins.axios;
			console.log(api);
			api.get('/api/login_config')
	      .then( (response) => {
	      	console.log(response);
	      } )
	      .catch( (error) => { // 请求失败处理
	        console.log(error);
	    });
		},
		gotoForgetPwd: (username, event) => {
			console.log("gotoForgetPwd");
			console.log(event.target.tagName);
			
		}
	}
}

未來如果有其他外掛需要於全域設定的也能夠加入到 appPlugins 中提供呼叫。

文件中有提到一些好處：

Documented APIs.
Familiarity among developers.
Standard usage patterns that, by design, avoid common problems.
Integration with Vue Devtools.
You don’t have to maintain the code yourself.

另外我認為未來在同一個專案中如果有不同的應用場景，可以建立不同外掛集合的檔案提供呼叫，這樣可以整理成一個檔案呼叫，減量減少一個 vue 檔案要 import 一堆而且還要注意上下傳遞關係的麻煩。

目前對 ES modules 方式的疑或是：每一個 vue 檔案 import 一次，他會不會就直接 create 一個新的實例？
2022-10-16 update: 這邊在 axios.create 中 baseURL 參數用隨機產生。發現 ES modules 的方法每次 import 都不會產生新的 baseURL 。並不會每次 import 就 create 一次的。

另外有翻到一個套件叫做 vue-axios ，看起來是包好直接放在 windows 裡面，這有空可以來試試。

www.npmjs.com

vue-axios

A small wrapper for integrating axios to Vuejs. Latest version: 3.5.0, last published: 3 days ago. Start using vue-axios in your project by running `npm i vue-axios`. There are 500 other projects in …

同場加映，單例的設計模式參考：

www.runoob.com

单例模式 | 菜鸟教程

单例模式单例模式（Singleton Pattern）是 Java 中最简单的设计模式之一。这种类型的设计模式属于创建型模式，它提供了一种创建对象的最佳方式。 …

貼心翻譯給看不懂簡體的繁體中文使用者，重點是這些：

意圖：保證一個類僅有一個實例，並提供一個訪問它的全局訪問點。
主要解決：一個全局使用的類頻繁地創建與銷毀。
何時使用：當您想控制實例數目，節省系統資源的時候。
優點：