elecrton-vueでweb用にbuildする

ビルドのコマンドは以下の通りです。
package.jsonに記載があります。

yarn build:web

ビルドされたソースはdis/webに作られます。

ただこのままだと

Uncaught ReferenceError: process is not defined

が発生します。

動作に問題はないのですが、不要なエラーが出ているのが気になるところです。

解決方法としてはindex.htmlの以下の部分を削除します。


参考:
https://github.com/SimulatedGREG/electron-vue/issues/195

解決策は提示されてますが、electron用のテンプレートなので、特に対応しようという感じではないようですね。

Vuexでstateのデータを初期化する方法

動的にstateのプロパティを設定したいことは多々あります。

ただし、Vue.jsは最初に宣言しておかなければリアクティブになりません。

データの設定をする3つの方法書いてみたいと思います。

すべて列記しておく

一番シンプルです。
全く動的ではありませんが、一番最初に思いつく方法でしょう。

const state = {
  somethingData: [
      'data1', 'data2'
    ]
} 

配列だけ作っておく

先に配列だけ作っておき、どこかのタイミングでcommitで値をセットします。

メリットとしては、初期化のタイミングを決められることです。

逆にデメリットとして、初期化の処理をどこかで呼び出さなければなりません。

const state = {
  somethingData: []
} 

const mutations = {
  initSomethingData (state, data) {
      for (let i = 0; i < data.length; i++) {
          state.somethingData.push(data[i])
        }
    }
}

即時関数を使う

jsonなどの外部のデータに頼る場合は即時関数が便利です。

const state = {
  somethingData: (function () {
      return require('somethinData.json')
    }())
}

可読性が下がると思うのであれば、変数に入れ直すといいかもしれません。

let initSomethingData = function () {
    return require('somethinData.json')
}

const state = {
  somethingData: initSometingData()
}

エレメント無しでv-forを使いたい時

v-forを使いたいがエレメントはネスとして欲しくない時というのは結構あります。

例えば、生成されたHTMLが見づらくなるということ、CSSの反映がうまくいかないなどがあります。

エレメントを抜く場合は、単純にtemplateと置き換えてあげればOKです。

<template v-for>
</template>

Nuxtのmiddlewareの注意点

console.logが表示されない

要検証ですが、ブラウザでのコンソールデバッグができないです。

router.pushするとmiddlewareがコールされない

これも要検証ですが、コードを使ってURL遷移すると呼ばれませんでした。