Closed4

Vue プラグイン (plugin) を作成する

Junsei NagaoJunsei Nagao

目標

Motivation

VueとFirebaseを使ったアプリ開発を指導しているのだが、Firebase Authenticationを使ったログイン機能の作成において、Firebase Auth によるログイン状態の管理と Vuex を使ったアプリ全体での状態管理の2つを一度に手を付けようとすると重い。

Goal

Vue2系でログインの状態を簡単にアプリ全体で管理をするためのFirebase Authenticationを簡単にラップしたVue プラグインを作成する

Junsei NagaoJunsei Nagao

設計

軽く Firebase Auth についての仕様を確認すると...

Firebase JS SDK の firebase/authfirebase.auth().signInWithPopup() 等を呼び出すことで認証を行って、セッション情報をfirebase に保存してくれる。(クライアント側はどこに保存されてるんだろう?) そして、 firebase..auth().onAuthStateChanged() を使うことで、セッション情報を購読してくれる。

これをVueアプリ全体で状態管理したいので、firebase..auth().onAuthStateChanged() で購読したセッション情報を Vue.prototype に新しく $auth を追加して保存する。

各コンポーネントでは、this.$auth.currentUser などで現在の情報を読み込める様にする。

Junsei NagaoJunsei Nagao

プラグインの作成方法

とりあえず、Vue.jsの公式docを読むとプラグインのページがある

プラグインは通常 Vue にグローバルレベルで機能を追加します。プラグインに対しては厳密に定義されたスコープはありません。プラグインはいくつかのタイプがあります:

とあるが、今回つくるプラグインは

  1. Vue.prototype に記述することにより、1つまたは、複数の Vue インスタンスメソッドを追加します。

のタイプになる。

より具体的な作成方法

公式docのプラグインの記述を読み解くと、おそらくこう使う

Vue CLIプロジェクトの main.js で...

main.js
import Vue from 'vue'
import App from './App.vue'

const MyPlugin = new Object();
MyPlugin.install = function (Vue, options) { 
  Vue.prototype.$myMethod = function (methodOptions) {
    // 何らかのロジック ...
  }
}

// `MyPlugin.install(Vue)` を呼び出します
Vue.use(MyPlugin)

new Vue({
  render: h => h(App),
}).$mount('#app')
このスクラップは2022/10/02にクローズされました