Nuxt.jsでpluginを使ってみた（郵便番号検索）

Nuxt.jsでpluginを使ってみた（郵便番号検索）
プラグインファイルを作成する
nuxt.config.jsを編集する
自作プラグインを使ってみる
1. スクリプト
2. タグ
動作確認
サンプル

Nuxt.jsでpluginを使ってみた（郵便番号検索）

前回はaxiosをnuxtに導入して、郵便番号apiやqiita apiを動かしてみました。
今回はnuxtで郵便番号検索プラグイン作ってみたので、自作プラグインの作り方を書いています。

プラグインファイルを作成する

plugins/ 配下に作りたいプラグインのjsファイルを配置します。
plugins/zipcode.js という名前で作成しました。

ファイルの内容は下記です。

export default (context, inject) => {
    const zipcode = async function(zipcode) {
        return await this.$axios.get(`/zipApi/api/search?zipcode=${zipcode}`);
    }

    inject('zipcode', zipcode);
    context.$zipcode = zipcode;
  }

前回使ったaxiosで郵便番号apiを叩いている箇所をマルッと持ってきました。
パラメータで、郵便番号を渡して検索した結果のPromiseを返すようにしています。

nuxt.config.jsを編集する

作ったプラグインを使うために、nuxt.config.jsを修正します。

pluginsの配列の中に作ったプラグインを定義します。

/*
** Plugins to load before mounting the App 
*/
plugins: [
  '~plugins/zipcode.js'
],

自作プラグインを使ってみる

スクリプト

こんな感じでスクリプトを書いてみました。

export default {
  data() {
    return {
      zipcode: null,
      searchResults: [], 
    }   
  },  
  mounted() {
    console.log('mounted plugin test page');
  },  
  methods: {
    async search() {
      let page = this;
      await this.$zipcode(this.zipcode).then(function(result) {
        page.searchResults = result.data.results;
        for (let key in result.data.results){
          let value = result.data.results[key];
        }   
      }); 
    }   
  }
}

検索ボタン(search)が押されたときに、郵便番号を渡して、
結果がPromiseで戻ってくるので、thenのクロージャで受け取って、グローバルなsearchResults変数に入れました。

inject('zipcode', zipcode);
context.$zipcode = zipcode;

plugin作成時に上記のように書いているところがポイントで
injectしているため、this.$zipcodeみたいな感じで使えるようです。

<template lang="pug">
  div.container
    h2 郵便番号検索
    v-row(align="center")
      v-col(cols='3')
        v-text-field(label="郵便番号" v-model="zipcode" placeholder="8100000" dense hint)
      v-col(cols='4')
        v-btn.primary(@click="search") 検索
    v-row
      v-col(cols='12')
        v-list
          v-list-item-group(v-for="(item, key) in searchResults")
            v-list-item
              v-list-item-content {{item.address1}}{{item.address2}}{{item.address3}} ({{item.kana1}}{{item.kana2}}{{item.kana3}})
            v-divider
</template>

テキストフィールドで入れた値はスクリプト定義のzipcodeと紐づけてます。
v-forで取れた値をループして、それぞれ繋げています。