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

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

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

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

### 使用 pinia
儲存狀態
參考：

interface StoreState {
  isMobile: boolean;
}

export const useBaseStore = defineStore({
  id: "base",
  state: (): StoreState => {
    return {
      isMobile: false,
    };
  },
  actions: {
    setIsMobile(isMobile: boolean) {
      this.isMobile = isMobile;
    },
  },
});

import { useWindowSize } from "@vueuse/core";

watchEffect(() => {
    baseStore.setIsMobile(width.value < 768);
});

> https://vueuse.org/core/useWindowSize/
>
> watch -> 監聽特定事件
> watchEffect -> 監聽所有
### 定義 title

definePageMeta({ title: "GFG" });

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