【初心者】Nuxt.jsの学習記録（自分用・途中）

udemyの超vue.js2完全パックをベースに学習しています。
https://www.udemy.com/course/vue-js-complete-guide/learn/lecture/15371734#questions
javascriptから学習をしています。


##ページ
- /page配下
- ページ全体の表示に必要なHTML・CSS・JSが入っている
- コンポーネントを読み込むこともできる
- ページが親になる場合が多い。

##コンポーネント
- /components配下
- ページ上で使うパーツファイル
- そのコンポーネントを表示するために必要なHTML、CSS、JSのみが格納されている
- コンポーネント内で更にコンポーネントを読み込むことも可能
- コンポーネントが子になる場合が多い。

##ページからコンポーネントへのデータの受け渡し
2パターンある。

1.vuexのstateを使う
2.propsを使う

単純なのは2だが、propsの定義が必要・バケツリレーが発生するため基本的に1の形式に統一したい。
（のだが適切に使い分けるべき。後述）

##破綻するケース
- 全部storeに寄せすぎるとstoreの肥大化を招いて破綻する。
 - storeは結局グローバル変数と変わりない。
- 保持する必要の無いデータはstoreを使わずpropsで適切に使ったほうが良い。
 - パフォーマンス的にもデータ管理的にも。

下記から抜粋
[【Nuxt】ページとコンポーネントの関係と管理について](https://qiita.com/yama-t/items/e25fd0874f816c515c0c)

##data()
値を保存している場所という認識を持つと理解しやすい。
必ず```return {}```内に書く。

```
data() {
  return {
    title: 'ページのタイトル',
    desc: 'ページの説明',
    child: [],
  }
},
```

- dataで宣言した変数にtemplate内でアクセスする方法は```{{title}}```でアクセスできる。
- script内からは```this.title```でアクセスできる。

##

##


##.sync修飾子
- 子が親に通知して親が値を変更することができる。
- 大量の子コンポーネントを用意する際に使用する。
- .sync修飾子は親に書く。
- 実際は子要素から親要素にイベントを渡しているだけ。

```
:子.sync = "変数名"
```
と書く。これで親コンポーネントが子コンポーネントの値の変化を監視できる。逆に子は入力された値を親に通知できる。
sync修飾子を使った方が書くコードが一気に減るイメージはついた。

##computed
- プロパティなのでgettetr,setterを定義できる。
- ページ内からアクセスする関数を宣言する場所。

```
computed: {
  testFunc() {
    (略)
    return value
  },
},
```

template内からは```testFunc```でアクセスできる。

##methods
メソッド。

```
methods: {
  testFunc(args) {
    (略)
    return value
  },
},
```

template内からは```const result = this.testFunc(10)```でアクセスできる。()の中に値を代入することによって



##propsを使う際のルール
- 子の方にpropsを指定して使う。
- 親ではv-bind：（:のみでも良い）で子に渡したいprops名を指定する。
- propsをdata内、computed内で使用する場合はthis.props名にする。


##【Vuex】mapState, mapGetters, mapMutations, mapActionsのルール
- 状態を呼び出すのは```mapState```、```mapGetters```。computed内に書く。
- 状態を変化させる```mapMutations```、```mapActions```methods内に書く。
- 上記4つによってシンプルに呼び出すことができるのが最大のメリット。
- Vuexのstateの中身を帰るのはmutationsの中のみにする。
- mutations内の関数の第一引数にはstateをとるのがルール。第二引数には関数内で使用するためのなんでも良い引数をつける。

```
this.$store.state.state1 //通常
this.state1 //mapState使用

this.$store.getters.getter1 //通常
this.getter1 //mapGetters使用

this.$store.commit('mutation1', 引数) //通常
this.mutation1(引数) //mapMutations使用

this.$store.dispatch('action1', 引数) //通常
this.action1(引数) //mapActions使用
```

###dispatch
- Actionを実行することをdispatch(ディスパッチ)と呼ぶ。

###commit
- Mutationを実行することをcommit(コミット) と呼ぶ。

###router.push
画面遷移の場面で使用する。this.router.push('パスを書く')と使う。
 [Vue.js公式ページ](https://router.vuejs.org/ja/guide/essentials/navigation.html)

参考
https://qiita.com/terufumi1122/items/6f9470c8d416a4af7502

具体的なVuex Storeへのアクセス方法は下記にまとめてある。
https://qiita.com/Denpa_Ghost/items/95e9596934d2997cc78f

namespaceを使用した際のstoreについては下記の通り・。
https://noumenon-th.net/programming/2019/08/24/nuxt-js-store/

###ネット上にあった参考例
https://papadays.com/post/10a84cfvx3tm8ln0gktsii/

###例
todoアプリの解説記事はこちら。
https://qiita.com/shota0701nemoto/items/20fdb9f57c579ede2084

##vue.js入門
p260~p262
App.vueのmethods内のmutationから、index.vueのsore内のmutationsに送られる。


##middleware周りについて
middlewareで関数を定義すれば、サーバー側でDBなどの処理を行いHTMLのDOMを構築してブラウザに渡す前に関数が実行される。主にログイン機能に使われる。

例としてmiddleware/auth.jsファイルを作成する。

```auth.js
export default function ({ redirect, store }) {  //{ redirect, store }がcontextと呼ばれる部分。
  const user = store.state.user                  //store内のstateのuserの値にアクセスし、変数userに格納する。
  if(!user) {                                    //変数userの値がfalseだったら
    redirect('/login')                           ///loginにリダイレクトする。
  }
}

```

で、特定のページで読み込む。

```
<script>
export default {
  middleware:"auth" //middleware内のファイル名を書くことによって読み込める。
}
</script>
```

全てのページで適用させたい場合はnuxt.config.jsで読み込む。

```
export default {
  router {
    middleware: 'redirect'
  }
}
```

下記記事を参考。
https://zenn.dev/onota/articles/f8d8e57c841db75584d9

##javascriptの基礎
###objectとは
- {}で囲っているのがオブジェクト。
- それぞれの値にプロパティと呼ばれる名前がついている。つまりkey : valのvalがプロパティ、keyはキー。

###配列とは
- []で囲っているのが配列。配列の要素にはオブジェクトを使うことが可能。
- 配列はプロパティを使うことはできない。

###アロー関数
 
```
=>  //こんなやつ。
```
returnを省略できる。

###async・awaitについて
・非同期処理と呼ばれる処理を書くための書き方。処理を一時的にとめたい場合に使用する。心理テストの1問一答式の処理などに使われる。
・awaitとは、asyncを用いた関数内のみで使える予約語。awaitで一気に処理する。

###ルール
・ async function で定義された関数は .then() で結果を取得する。
・また、asyncをつけた関数の中ではawaitを使うことで .then() を代用できる。

###async・awaitの例
```
async function taskA() {
    return 100;
}
async function exection() {
    const result = await taskA();
    // 100と表示される
    console.log(result);
}
exection();
```
参考
[【Nuxt】ページとコンポーネントの関係と管理について](https://medium.com/acompany/javascript%E3%81%AEasync-await%E3%82%92%E5%AE%8C%E5%85%A8%E3%81%AB%E7%90%86%E8%A7%A3%E3%81%99%E3%82%8B-6552337eb92)


###コールバック関数について
こちら。
https://sbfl.net/blog/2019/02/08/javascript-callback-func/

理解はしたが、実際に書いて覚えるのが良さそう、、

##補足
javascriptが初心者でありgetter,setterの理解は下記記事を読んだ。
https://ja.javascript.info/property-accessors