概要

ドットインストールの「Vue.js入門」を実施してある程度Vue.jsをわかった気になった。
https://dotinstall.com/lessons/basic_vuejs_v2

しかし、実際にリリースされているVue.jsのソースを見るとさっぱりわからなかった。
このため、疑問点と調査経緯を自分のメモ目的でこの記事に残していく。

疑問点

yarn run xxx

package.jsonのscriptsで定義されたxxxを実行する。

"scripts": {
    "xxx": "～～～～～～～～",　←これを実行
    "yyy": "～～～～～～～～",
　　　　：
　　　　：
  },

■yarn runのドキュメントはこちら。
https://classic.yarnpkg.com/ja/docs/cli/run

app.use(nuxt.render)

expressのミドルウェアとしてNuxt.jsを使う。

 const express = require('express')
 const app = express()
  :
 app.use(nuxt.render)
  :

Node.jsの「ミドルウェア」という概念がいまいちわかっていない・・・。

■API: nuxt.render(req, res)
https://ja.nuxtjs.org/api/nuxt-render/

■ExpressのミドルでNuxt.jsを利用
https://www.wakuwakubank.com/posts/666-nuxtjs-express-middle/

module.exports={}

外部（別ファイル）から参照できるようにする。

module.exports = {
  mode: 'xxx',
  router: {
    base: '/yyy/'
  },

上記の定義をしたjsファイルをrequireすると、jsファイルの中身を参照できる。

■module.exportsとは何か、どうもわからなかったので実験してみた〜Node.jsにて外部moduleをrequireする〜
http://karoten512.hatenablog.com/entry/2018/01/28/191928

this.$store.dispatch(～～～）

「$store」はどこにも宣言されていない。
Vuex（ビューックス？）のステートオブジェクトとのこと。
セッションみないたもの？？セッションよりは奥が深そう。

■Vuexステート
https://vuex.vuejs.org/ja/guide/state.html

■Vue.js + Vuexでデータが循環する全体像を図解してみた
https://qiita.com/m_mitsuhide/items/f16d988ec491b7800ace

this.$store.dispatch(～～～）その②　dispatchについて

「$store.dispatch」でステートのactionを実行（らしい）
actionは非同期処理（らしい）

actionの実行とは何か？

this.$store.dispatch(～～～）その③　actionについて

「$store.dispatch」でステートのactionを実行するとしてactionとは何をするのか？
実態が不明。

\store\index.jsにexport const actionsやexport const mutationsがあった。
つまり「$store.dispatch」を実行すると、\store\index.jsにexport const actionsのような気がしてきた。

async function() {const response = await this.$store.dispatch(～～～）}

asyncで非同期関数。
awaitでpromiseのresolveを実行。
つまり、\store\index.jsのactionを非同期実行した結果がresponseに入る？
※このあたり、理解が曖昧。以下などを見て、なんとなく上記の理解。

　https://qiita.com/niusounds/items/37c1f9b021b62194e077

() => {～～～}

何もない()はJavaScriptで１，２を争う理解できない記述。
catchは例外をキャッチするんだろうな～という何となく想像ができるがその後の() =>は全く想像できない。具体的なソースだとこんな感じ。

const response = await this.$store
          .dispatch('xxx', { 
           key1: valu1,
           key2: value2
          })
          .catch(() => {　　　　←ここがわからない。
            return false
          })

こちらがわかりやすかった。
https://qiita.com/may88seiji/items/4a49c7c78b55d75d693b

(引数,...)=>{...関数の本体...}

つまり() => {～～～}は引数なしの無名関数を宣言しているだけ。
上記具体例だと、catchが呼ばれたらfalseをreturnする無名関数を実行する、ということか。

methods内のfunctionのあり、なし

メソッドの記載で:funcitonを記載している場合としていない場合がある。
これはES2015からオブジェクトの中で記載する場合に省略できるようになっただけらしい。
（をjsファイルで外出しする場合は省略不可ということ？）

        methods: {
            onItemTap: function(args) {
                ：
            },
            onButtonTap() {
　　　　　　　　　：
            }
　　　　　}

参考ページ
https://zukucode.com/2017/04/vuejs-es2015.html