土曜：6.5h

ログインユーザ情報の永続化を試しているがmiddlewareにてcookieに保存することは成功しているがそれを画面に出す処理でうまく行かず。。。defaultでstateにアクセスしたいんだけどできない。ってかdefaultをtypescriptで書こうとするとエラる。。。時間に対して成果があまりなくて焦る。。。
日曜日も引き続き。。。

日曜：2h,2h,1h=5h

nuxt-movuex-module-decorators仕様にディレクトリ構造を変更

store直下にindex.ts,types.tsを作成。また、store/機能名でディレクトリを作成しindex.tsとtypes.tsを作成する。
store/index.tsはstoreを全体で使えるようにするためにexportするもの。以下のようにする（固定だと思う）

import Vue from 'vue';
import Vuex from 'vuex';
import { RootState } from './types';

Vue.use(Vuex);

export default new Vuex.Store<RootState>({});

store/types.tsはそれぞれの型をexportする（以下のように機能ごとに増えていく）

import { SearchBookState } from './search-book/types';

export interface RootState {
  SearchBookModule: SearchBookState
}

store/機能名の中のindex.tsには機能固有のaction,mutationを記述し最後にexport default getModule(SearchBookModule)の形でexportする
store/機能名のtypes.tsには機能固有の型を以下のように定義しindex.tsで使用する（vue側からもらうpayloadもここで定義する）

export interface SearchBookState {
  keywords: string
  books: any
  totalItems: number
  pageIndex: number
  isLoading: boolean
  isThere: boolean
  isApiError: boolean
}

export interface SearchBooksPayloadObj {
  keywords: string
  pageIndex: number
}

export interface SetSearchBooksObj {
  totalItems: number
  books: any[]
}

getterはvue側で書く（以下サンプル）

@Component
export default class SearchBooks extends Vue {
  protected keywords: string = ''
  protected get bookItems(): any {
    return SearchBookModule.books;
  }
  protected get pageIndex(): number {
    return SearchBookModule.pageIndex;
  }
//省略

フラッシュメッセージの作成

durationを引数に受け取り時間が経過したら（以下参照）
子コンポーネントとして設置するのでemitで値を渡す

garakuta-toolbox.hatenablog.com

月曜：10.5h

先日のフラッシュメッセージの件について、vuetifyでsnackbarという名前のコンポーネント？デザイン？として既存していた。
そのため、自作する必要はナシ Snackbar component — Vuetify.js

takumon.com

ファイルアップロードについて

ずっとconsole.logで確認していたが、ブラウザのNetworkにてリクエストヘッダーを確認すると送れていることが判明。
ファイルはconsole.logでは見ることができないようだ。以下のようにしてサーバ側へ送る。

const form = document.getElementById('fileinfo')[0].files[0]
   const files = new FormData()
   files.append('upload_file', form)
   //console.log(files)では見れない。
   console.log(files)//からっぽ
   //files.get('appendで詰めたオブジェクト名を指定')
   console.log(files.get('upload_file'))//これは見れる

火曜：10.5h

マルチパートファイル形式でのファイルアップロード
java側の調査で1日時間を取られた。。。
java単体じゃないとブレイクポイントは使えない・疎通の確認でデバッグしたいならログを仕込む

水曜：11h

引き続き業務でハマってる。。。
マルチパートのファイルの送り方

const form = document.getElementById('fileinfo')[0].files[0]
   const files = new FormData()
   files.append('upload_file', form)

月曜日時点ではgetElementById('fileinfo')[0]だったけどfile[0]とすることで取得ができた。FormDataの変換はvalueいらない。

木曜：10h

久しぶりにNuxtを触れている。
言語が新しいとか古いとかでモチベーションを上下させるのは少し違うかな。という考え方になってきた。問題を解決するための思考を磨くことで言語の壁はすぐに超えていける。これは新しい言語や新しい壁にぶつかったときに問題解決力（自走力）として問われるかなり重要な能力。
そのため言語にはあまりこだわらず難しそうな課題にどんどん挑戦していくことが重要と思った

技術面

コンテナは配下のコンポーネントから呼び出し元（おじいちゃん画面）のメソッドを叩くにはコンテナを経由して同じメソッドを定義しなければいけないと思っていたが、孫から呼べることが判明した。
以下のselectの部分が孫とおじいちゃん（呼び出し元）を接続している

//呼び出し元画面
<tree--container v-slot="scope">
        <treet
          :tree-data="scope.mytreeData"
          :my-tree-data="scope.mytreeData"
          :selectorg="scope.selectorg"
          :orgclntloadingflg="scope.clntloadingflg"
          :tab-info="tabInfo"
          :tab-changeflg="scope.tabChangeflg"
          :my-orgflg="scope.myflg"
          :callback="scope.callback"
          @select="select"
          @init="scope.init"
          @load="scope.load"
          @orgclntloadingflgcommit="scope.orgclntloadingflgcommit"
        />
      </treet-container>

勘違いしてた。。。。

金曜：10h

メッセージの共通化に関するリファクタリング
複数メッセージへの対応
こんな感じで設置する

<error-message :value="errorMessages" @close="removeErrorMessageAt" />

コンポーネントの中身はこんな感じ。呼び出し元から配列でエラーメッセージを取得する
で、同階層にMessageというコンポーネントを作成（tsファイル）し、メッセージの追加やインデックスを渡して任意のメッセージの削除を行なっている

<template>
  <message
    :value="value"
    message-type="error"
    @close="index => this.$emit('close', index)"
  />
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'nuxt-property-decorator'
import { Message } from '~/components/atoms'

@Component({
  components: {
    Message
  }
})
export default class ErrorMessage extends Vue {
  @Prop(Array) value!: string[]
}
</script>

さっき言ってた同階層のMessageコンポーネント

import { Component, Vue } from 'nuxt-property-decorator'
import { AxiosError } from 'axios'
import * as XXAxios from '~/script/utils/xx1-axios'
import * as XXMessage from '~/script/utils/xx-message'

@Component({})
export default class ErrorMessageBase extends Vue {
  errorMessages: string[] = []
  addErrorMessages(messages: string[]): void {
    messages.forEach(m => this.errorMessages.push(m))
  }
  clearErrorMessages(): void {
    this.errorMessages = []
  }
  addError(error: AxiosError): void {
    XXAxios.buildError(error, errorMessageParams => {
      this.addErrorMessages(XXMessage.buildMessages(errorMessageParams))
    })
  }
  removeErrorMessageAt(index: number): void {
    // 削除しなくても非表示になる。。。
    this.errorMessages.splice(index, 1)
  }
}

まだ部品があるけど概念的なのは掴めたのでオケ

週次報告

目標勉強時間：70h
勉強時間：63.5h
目標との乖離：-197.25h
何を得たか：nuxt.js + TypeScriptの基礎 + javascriptの基礎
何が必要か：nuxt.js + typescriptの基礎と応用
来週の目標：nuxt.js + typescript のインプットとアウトプットを続ける

自分による自分のためのブログ

12月1週（実績）

土曜：6.5h

日曜：2h,2h,1h=5h

nuxt-movuex-module-decorators仕様にディレクトリ構造を変更

フラッシュメッセージの作成

月曜：10.5h

ファイルアップロードについて

火曜：10.5h

水曜：11h

木曜：10h

技術面

勘違いしてた。。。。

金曜：10h

週次報告