Vue.js でウィジェットっぽいもの (仮) その2

Vue.js

前回の続き

Vue.js でウィジェットっぽいものを作ってみる (仮) - kntmr-blog

続編として今回は以下をやってみようかと。

  • Webpack で出力するファイルをまとめる
  • ウィジェットにパラメータを渡せるようにする
  • 任意のタグ/キーワードで表示できるようにする

Webpack で出力するファイルをまとめる

vue-cli の Webpack テンプレートでは CommonsChunkPlugin プラグインがデフォルトで設定されている。普通はこのままでよいが、今回はウィジェットとして作成するので、HTMLから読み込むファイルをまとめたい。

出力ファイルの設定は webpack.prod.conf.js に記載されている。で、plugins の中に記載されている webpack.optimize.CommonsChunkPlugin の箇所をコメントアウトする。尚、デフォルトで出力される vendor と manifest についてはまだよく分かっていません...。

あと、CommonsChunkPlugin プラグインについては、以下が参考になりました。

qiita.com

ウィジェットにパラメータを渡せるようにする

以下が参考になりました。Vue インスタンス生成時に render 関数の中で App.vue の props に渡すというもの。

qiita.com

今回は、HTML に data 属性でパラメータを設定する。

<div id="app" data-tag="vue.js"></div>

で、main.js の中で取得して store に格納する。

new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App },
  render: function (createElement) {
    const dataset = this.$el.dataset
    this.$store.dispatch('setQuery', dataset.tag)
    return createElement('App')
  }
})

その他、Vue インスタンス生成前にやるなら以下でも可。

import store from './store'

const element = document.getElementById('app')
const dataset = element.dataset
store.dispatch('setQuery', dataset.tag)

任意のタグ/キーワードで表示できるようにする

上記、store に格納したパラメータを API アクセス時にクエリで渡す。とりあえず、これで任意のタグでウィジェットを表示できる。キーワードも同様にできると思うので今回は省略。

import axios from 'axios'

const api = {
  get: (url) => return axios.get(url)
}
export default {
  getItems: (query) => api.get(`https://qiita.com/api/v2/items?query=${query}`).then(resp => {
    return Promise.resolve(resp.data)
  })
}

あと、store にデータとクエリを一緒に持たせるのはどうなんだろうか。個人的には悪くない気もするけど...。