this.$route.paramsを使ってURLの末尾からIDを取得し、取得したIDに紐づくデータをstoreから取り出して表示するというコンポーネントを書いた時です。なんと画面リロードするとデータが表示されません。

なんてこったい。

（端的に言うとhttps://swallow-incubate.com/archives/blog/1みたいなページで「1」に紐づくデータを表示したいということです。）

これはcomputedを使うことで意図するような動作になりました。

修正前のコード

[cc_javascript]

export default {
name: ‘detail’,
data: function () {
return {
blogId: parseInt(this.$route.params.blogId),
blogDetail: this.$store.getters.blogData(this.blogId)
}
}
}
[/cc_javascript]

[cc_javascript]

export default {
name: ‘detail’,
data: function () {
return {
blogId: parseInt(this.$route.params.blogId),
}
},
computed: {
blogDetail: function () {
return this.$store.getters.blogData(this.blogId)
}
}
[/cc_javascript]

意外とこれもハマったのですが、API等から取得した画像を背景画像に指定する際はtemplate内に下記のように記述すると実現できます。

[cc_javascript]

export default {
data: function () {
return {
Image: ‘APIなどで取得する想定’
}
}
}
[/cc_javascript]

electronBuilderでのビルド時にアイコンを指定する方法

Vue CLI3で初期設定を行なった際には生成されないのですが、vue.config.jsというファイルを作成し、下記の記述をすることによって対応できました。

vue.config.js
[cc_javascript]
module.exports = {
pluginOptions: {
electronBuilder: {
builderOptions: {
mac: {
icon: ‘build/icon.png’
}
}
}
}
}
[/cc_javascript]

buildディレクトリ配下にicon.pngを格納するのをお忘れなく！

Electron起動時に初期画面が表示されない

ビルド後、Electronアプリを起動した時に、<router-view />の部分に何も表示されないという事象が発生しました。初期起動した際 「/」（ルート）が表示されると思っていたら、そうではないようなのでApp.vueに下記の記述をすることで対応できました。

App.vue

[cc_javascript]
export default {
name: ‘app’,
created () {
this.$router.push(‘/’)
}
}
[/cc_javascript]

これも他の方法が無いのか気になってます。ちなみにWebアプリ作る時にこれを書いてしまうと、リロードする度にトップページに戻るのでよろしくないです。

まとめ

細かいことをあげるともっと色々あったと思いますが、すぐに思い出したのはこんなところです。

まだ、触り始めたばかりですがVue.jsで作るのが結構楽しくなってきたので、これからも積極的に使っていきたいと思います。

それでは、また！