前回の続き
Vue.js でウィジェットっぽいものを作ってみる (仮) - kntmr-blog
続編として今回は以下をやってみようかと。
- Webpack で出力するファイルをまとめる
- ウィジェットにパラメータを渡せるようにする
- 任意のタグ/キーワードで表示できるようにする
Webpack で出力するファイルをまとめる
vue-cli の Webpack テンプレートでは CommonsChunkPlugin プラグインがデフォルトで設定されている。普通はこのままでよいが、今回はウィジェットとして作成するので、HTMLから読み込むファイルをまとめたい。
出力ファイルの設定は webpack.prod.conf.js に記載されている。で、plugins の中に記載されている webpack.optimize.CommonsChunkPlugin の箇所をコメントアウトする。尚、デフォルトで出力される vendor と manifest についてはまだよく分かっていません...。
あと、CommonsChunkPlugin プラグインについては、以下が参考になりました。
ウィジェットにパラメータを渡せるようにする
以下が参考になりました。Vue インスタンス生成時に render 関数の中で App.vue の props に渡すというもの。
今回は、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 にデータとクエリを一緒に持たせるのはどうなんだろうか。個人的には悪くない気もするけど...。
