---
# System prepended metadata

title: 10/30 學習日志
tags: [學習日誌]

---

# 10/30 學習日志
## 上週目標完成狀態
- [ ] 插件系統
    - [x] hotreload devTool in dev mode
    - [ ] flex-wrap
- [ ] GFG官網
    - [ ] 了解ssr
    - [ ] 了解seo跑分
    - [ ] nuxt3

## 本週要求目標
- [ ] 插件系統
    - [ ] 帳密導出及導入
    - [ ] 分不同網站儲存
    - [ ] theme
- [ ] GFG官網
    - [ ] 框架先分好

## 插件系統
僅指派無參考資料

## GFG官網
### 分成手機及電腦版
兩種方法：
* css: `max-md`
* 在template使用`v-if`

### 使用 pinia
儲存狀態
參考：
```typescript
interface StoreState {
  isMobile: boolean;
}

export const useBaseStore = defineStore({
  id: "base",
  state: (): StoreState => {
    return {
      isMobile: false,
    };
  },
  actions: {
    setIsMobile(isMobile: boolean) {
      this.isMobile = isMobile;
    },
  },
});
```
```typescript
import { useWindowSize } from "@vueuse/core";

watchEffect(() => {
    baseStore.setIsMobile(width.value < 768);
});
```
> https://vueuse.org/core/useWindowSize/
> 
> watch -> 監聽特定事件
> watchEffect -> 監聽所有
### 定義 title
```typescript
definePageMeta({ title: "GFG" });
```

> 下載網頁 resources（img...）
> [chrome 插件](https://chromewebstore.google.com/detail/save-all-resources/abpdnfjocnmdomablahdcfnoggeeiedb)