ୈ 3 ষ Web Components ͷجૅͱ։ൃ࣌ͷઃܭߟ 3.3 ։ൃڥߏங
ιουͰίϯϙʔωϯτ͕ΞϯϚϯτͨ͠ͱ͖ʹ store ͷมߋݕΛఀࢭ͠·͢ɻ·ͨɺTSelector
ͷΑ͏ͳδΣωϦΫεΛ͏͜ͱͰΓͷܕิ͕ޮ͘Α͏ʹ͠·͢ɻ
Ϧετ 3.8: AppRoot.ts
1: import { LitElement, css, html } from "lit";
2: import { customElement, state } from "lit/decorators.js";
3: import { StoreSelector } from "./utils/StoreSelector";
4:
5: @customElement("app-root")
6: export class App extends LitElement {
7: @state()
8: private todoSelector = new StoreSelector(this, (state) => state.todo);
9:
10: public render() {
11: return html‘
12:
13: ${JSON.stringify(this.todoSelector.state.todo)}
14:
15: ‘;
16: }
17: }
Ϧετ 3.8 ͷΑ͏ʹ StoreSelector ίϯτϩʔϥͰ store ͷΛݺͼग़͠·͢ɻ
ϖʔδϧʔςΟϯά
SPA Λ࡞Δ্ͰඞཁͳΫϥΠΞϯτͷϖʔδϧʔςΟϯάॲཧΛ࣮͠·͢ɻϧʔλʹɺWeb
Components ϑϨϯυϦʔʹઃܭ͞Ε͍ͯΔ@vaadin/router ͱ͍͏ϧʔςΟϯάͷϥΠϒϥϦΛ
͍·͢ɻ
Ϧετ 3.9: AppRoot.ts
1: import { LitElement, html } from "lit";
2: import { ref, createRef, Ref } from "lit/directives/ref.js";
3: import { customElement } from "lit/decorators.js";
4: import { Router } from "@vaadin/router";
5:
6: @customElement("app-root")
7: export class App extends LitElement {
8: private routerRef: Ref = createRef();
9:
10: public firstUpdated() {
11: const router = new Router(this.routerRef.value);
12: router.setRoutes([
13: {
14: path: "/",
15: action: async () => {
37