---
# System prepended metadata

title: 撰寫自己的 Plugins
tags: [Mike課程]

---

---
tags:  Mike課程
---
# 撰寫自己的 Plugins

### ==介紹  Plugins 基本概念==
官網參考位置 : https://nuxtjs.org/docs/directory-structure/plugins/
> 常見的撰寫幾種方式
1. 由你自己撰寫 Plugins 再注入 Nuxt。
2. 將原本寫好的vue，塞入Nuxt中。
3. 將原來寫好的Nuxt包裝後，塞入Nuxt中。
![](https://i.imgur.com/DVN5iJb.png)

### ==自己撰寫 Plugins==
>  撰寫起手式

```javascript=
export default ({ app }, inject) => {
  inject("Event Name", {});
};

```
* 在Plugins 底下建立一個demo.js檔案、並取一個名稱EventText

```javascript=
export default ({ app }, inject) => {
  inject("EventText", {
    log(val) {
      console.log("EventText=>", val);
    },
  });
};
```
* 在nuxt.config.js註冊一個 在Plugins路徑

```javascript=
  plugins: [
    "~/plugins/demo.js"
  ],
```
* 在mounted中加入函式指向自己

```javascript=
 mounted() {
    console.log(this);
  },
```
> log中就會有 EventText 方式存在
![](https://i.imgur.com/Vth6thd.png)

* 這時也可以透過自定義的$EventText的方式來運用

```javascript=
 this.$EventText.log("今天好天氣");
```
![](https://i.imgur.com/HCfG1Cj.png)
### ==asyncData 調用==
* 因為asyncData是server環境、沒有自己的this在調用上用法會不同

```javascript=
 asyncData(context) {
    context.$EventText.log("asyncData調用");
  },
```