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

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
    },