Posted at

Electronが素敵だったのでvueと組み合わせて使ってたらvueインスタンスのメンバが参照できずハマった

More than 1 year has passed since last update.


Electron始めました

Electonを使用してJavaScriptで単体アプリケーションが

気軽に作成できるようなので手始めにTODOアプリをと思ってたら作成中躓いて擦り剥いた。


Electron + vue2 + NeDB

確かに環境構築も慣れてれば30分かからないし

使い慣れたフロントエンドのフレームワークが1つあれば

短時間で出来てしまいそうです。

ただ作成当初から普通にwebアプリを作ってる感覚が消えない。

vue.js 2.16

Electron 1.4.13

NeDB 0.85

ちなみに15分くらいで環境整えてしまうには

①node.jsインストール

②ボイラープレート利用

 electron-quick-start-master

③上記②を展開してpackage.jsonのdependenciesにvueとか仕込む

④node.js command promptで cd "展開したフォルダ"

⑤npm install

で出来てしまいそうです。

最近ではelectron + webpack + vueのボイラープレートを配布してる人もいるみたいですが

今回は可能な限りシンプルにしたかったので使用しませんでした。


thisがvueインスタンスを指してなかった

ところで・・・

vueでdataに定義した値を参照する場合

そんなパラメータはない旨のエラーを頂く事が

よくあったためそんな時は何も考えずthis.testParam

等としてたら痛い目にあったのでメモ。

JavaScriptの「this」は「4種類」??

こちらにある記事を読んで関連がなさそうに感じていたが

(当初コールバック関数が非同期で動いていることが怪しいと感じていたため)

まさかと思い

this.xxx⇒vue.xxx

としたらうまくいきました。

フロントエンドの人にとっては初歩的なミスなのかもしれないが

随分ハマってしまいました。

this云々と言うより変数宣言が曖昧で怖い。

var vue = new Vue({

el: '#test',
data:{
testData: [], // テーブルに表示される検索結果データ
db : [], // NeDBデータベースオブジェクト
},
methods: {
doSearch: function (e) {

var condition = [];
// conditionに検索条件を投入

this.db.testCollection.find(condition,
function(err, docs){
if(err == null){
// Domへ挿入して画面更新
this.testData = docs;
console.log(this.testData); // ①1行前のtestData(thisが指しているものが②と異なる)
}else{
tmpMessage = err;
}
});

console.log(this.testData);// ②VueインスタンスのtestData
},