10/16,17

Vueインフラストラクチャコースの復習

- ref : https://www.inflearn.com/course/vuejs/

*ボードの作成

Idea:Boardはサーバにデータを送信する必要があります.
=>Apiは、サーバーにデータを転送し、サーバーから基板リストのデータを呼び出して画面をレンダリングします.

* Modal.vue構成部品の作成

Slot:コンテンツ置換領域

:親コンポーネントから作成したテンプレートを使用して、子コンポーネントのテンプレートを置き換えます.

名前付きSlot
:親構成部品のテンプレートは、子構成部品のSlotがより明確に一致するように使用されます.

サブアセンブリ例(Model.vue)

//Modal.vue
<div class="modal-container">
          <div class="modal-header">
            <slot name="header">
              default header
            </slot>
          </div>

          <div class="modal-body">
            <slot name="body">
              default body
            </slot>
          </div>

          <div class="modal-footer">
            <slot name="footer">
              default footer
              <button class="modal-default-button" @click="$emit('close')">
                OK
              </button>
            </slot>
          </div>
        </div>

親コンポーネントの例(AddBoard.vue)

<Modal>
    <div slot="header">
      <h2>
        Create new board
        <a href="" class="modal-default-button" 
          @click.prevent="SET_IS_ADD_BOARD(false)">&times;</a>
      </h2>
    </div>
    <div slot="body">
      <form id="add-board-form" 
        @submit.prevent="addBoard">
        <input class="form-control" type="text" v-model="input" ref="input">
      </form>
    </div>
    <div slot="footer">
      <button class="btn" :class="{'btn-success': valid}" type="submit" 
        form="add-board-form" :disabled="!valid">
        Create Board</button>
    </div>
  </Modal>

:親コンポーネントのラベルslotプロパティの値は、サブコンポーネントのslotラベルのnameプロパティと同じ部分で置き換えられます.
: AddBoard.Vueの<div slot="header">はModelです.vueの<slot name="header"></slot>을 대체해서 렌더링된다.

* Vue Store

は、1つのリポジトリにおいてアプリケーション内のデータを管理するための

である.

-Storeを無効にする

Addbboardによる基板作成ロジック=>$emit(「submit」)によりsubmitイベントがトリガーされ、ホームコンポーネントから基板が再起動されます.
データ抽出ロジック、

//Homde.vue
data() {
  return {
    boards : [],
  }
}

-Storeを使用する場合

AddBoard素子から直接基板を作成した後、Storeに登録されているactionsに登録されている方法で基板データを直接取得できます.

Store管理設定がAddBoardのデータを表示するかどうかも切り替えやすい.

によって非同期論理が操作され、突然変異=>状態更新=>状態によってデータが取得される.

mapState, mapGetters, mapActions, mapMutations
:storeのプロパティを簡単にインポートできます.

「mapState,mapGetters」:Vueインスタンスの計算プロパティ

「地図ワークステーション、地図アクション」:オブジェクト展開演算子(Object Spread Operator)によってメソッド属性上の記憶領域にアクセスします.

オブジェクト展開演算子を使用してリポジトリを使用する理由

は、Vueインスタンスの他のプロパティと簡単に使用できます.

//Homde.vue
//1. vuex의 속성들을 import 한다.
import { mapState, mapActions, mapMutations } from "vuex";

//2. 객체 전개 연산자를 이용해 속성을 가져온다.
computed: {
        ...mapState(["boards", "showAddBoard"]),
    },
methods: {
        ...mapMutations(["SET_IS_ADD_BOARD"]),
        ...mapActions(["FETCH_BOARDS"]),
        fetchData() {
            this.isLoading = true;
            this.FETCH_BOARDS().then(() => (this.isLoading = false));
        },
        onCreateBoard() {
            this.showAddBoard = false;
            this.fetchData();
        },
    },
		

mapState, mapActions...インポートしたプロパティを使用すると、Vueインスタンスではthisになります.通過できます.

commit, dispatch

、storeにおける突然変異および動作登録を呼び出す方法

.

//1. commit => mutations
this.$store.commit("LOGIN", token);

//2. dispatch => actions
//2.1 mapActions에 등록되어있을 경우, this를 통해서 접근이 가능
this.FETCH_BOARDS().then(() => (this.isLoading = false));

//2.2 Vue인스턴스에서 $store를 통해서 store에 접근할 수 있고, dispatch()를 이용해서 actions에 등록된 메서드를 사용한다.
this.$store
.dispatch("FETCH_BOARDS")
.then(() => (this.isLoading = false));

*モードウィンドウにEscキーを入力し、クリックして消去します。

ソース

//AddBoard.vue
mounted() {
	//0.
        this.$refs.boardTitle.focus();
	//1.
        this.setKeyupEvent();
        this.setClickcOutSideEvent();
},

methods : {
//2.
setKeyupEvent() {
	const self = this;
	window.onkeyup = function(e) {
		if (e.keyCode !== KEYCODE.esc) return;
			self.SET_IS_ADD_BOARD(false);
			window.onkeyup = null;
		};
	},
//3.
setClickcOutSideEvent() {
	const self = this;
	window.onclick = function(e) {
		const $target = e.target;
		if ($target.className === "modal-wrapper") {
			self.SET_IS_ADD_BOARD(false);
			window.onclick = null;
			}
		};
	},
}

//utils/constants.js
export const KEYCODE = {
    esc: 27,
    enter: 13,
};

素子を取り付け、refプロパティカーソル(?)を通ります.移動させるロジック.Mounted Hookで実行される理由:Mounted HookはコンポーネントがDOMにレンダリングされた後に実行されるため、refプロパティでエレメントを参照できます!

0とは異なり、Created Hookでも使用可能です.

windowで「keyup」イベントをバインドし、入力キーコードを確認して「Escape」キーを入力すると、モードを閉じて「window」を開きます.onkeyup=nullでイベントを無効にします.=>もっと良い方法はありませんか?

*エラー処理

アドレスウィンドウで、入力によって生成されなかったボードを呼び出そうとすると、404 not foundエラーが発生します.

//api/index.js
const NOTFOUND = 404;

//noNotFound()
const noNotFound = () => {
    alert("존재하지 않는 보드입니다.");
    router.push("/");
};

//Axios Wrapping 함수
const request = (method, url, data) => {
    return axios({
        method,
        url: DOMAIN + url,
        data,
    })
        .then((result) => result.data)
        .catch((result) => {
            const { status } = result.response;

            if (status === UNAUTHROZIED) {
                onUnauthorized();
            } else if (status === NOTFOUND) {
                noNotFound();
            }
            throw result.response;
        });
};

axiosは、応答オブジェクトのステータスコードが404である場合にアラートメッセージを出力し、ルートパスに移動する論理を記述する.

の実行順序:ルータのbeforeEnter=>トークン値であるため、next()関数=>ルーティングパスに対応するコンポーネント=>呼び出しライフサイクルフックのapi関数を実行する
=>404エラー

CSS

CSS :root

CSS値を変数として変換して使用し、一括変更を容易にします.

宣言例

:root {
	--black-color : #000;
}

使用例

var(--black-color);

flex-slich:物品の幅が容器より大きい場合、減少するかどうかを決定します.

flex-shrink : 1 //컨테이너의 크기에 반응하여 작아진다.
flex-shrink : 0 //컨테이너 크기에 관계없이 크기를 유지한다.

* Javascript

1.Elliment幅を求める

: https://stackoverflow.com/questions/294250/how-do-i-retrieve-an-html-elements-actual-width-and-height
=> element.offsetWidth;

2.エンベロープ位置、左に移動

正常動作:$("#wrapper").style.left = "-1200px"正常動作2:$("#wrapper").style.left = -2400 + "px"動作X:$("#wrapper").style.left = -1200

3.シンボル変換translateを変更する

: $wrapper.style.transform = "translate(x, y)";

4. event.target Vs event.currentTarget

: event.target=>イベントのエンティティの実行
: event.CurrentTarget=>イベントをバインドするオブジェクト

Reference

Vue Model構成部品:https://kr.vuejs.org/v2/examples/modal.html2

Vue Slot : https://kr.vuejs.org/v2/guide/components-slots.html

Vue Store : https://vuex.vuejs.org/kr/guide/state.html

モードの外側をクリック::https://ej2.syncfusion.com/vue/documentation/dialog/how-to/close-dialog-while-click-on-outside-of-dialog/2