Logo Amanda's Blog
  • Home
  • About
  • Skills
  • Experiences
  • Education
  • More
    Side Projects
  • Posts
  • Notes
  • Github
  • LinkedIn
  • English
    English 中文
  • Dark Theme
    Light Theme Dark Theme System Theme
Logo Inverted Logo
  • Tags
  • AI
  • Api
  • Backend
  • Container
  • Design-Pattern
  • Devops
  • Distributed
  • Drawio
  • Frontend
  • Infrastructure
  • Jwt
  • Kubernetes
  • LLM
  • LocalStorage
  • Markdown
  • Mermaid
  • Mssql
  • NFS
  • Nuxt
  • Performance
  • Postman
  • RAG
  • SA
  • SD
  • Sql
  • State
  • Stateless
  • Store
  • Test
  • Tool
  • Typora
  • Vue
Hero Image
Store

Store 狀態管理 Store 全局狀態管理(state management) 核心職責: 管理記憶體 state (在單次 session 中統一管理記憶體中的資料結構) 可觀察/可修改的接口,供外部 get/set store porperties 相對應的技術工具 React 生態:Redux、Zustand、MobX、Recoil、Jotai、Effector Vue 生態:Vuex、Pinia Angular 生態:NgRx、Akita Persistence:可選功能,用於跨 reload / 瀏覽器存活,沒有 Persistence 也能跨 component / module 共用 state,如服務是靜態的 SPA,就不需要考慮 Persistence Store 用途 能力 說明 範例 全局單例管理 state 在多個 component 間共享同一份 state 多個 component 都能讀 store.count,更新一處其他地方立即反應 Action orchestration 集中定義行為(副作用) store.increment() 自動更新 state,而所有使用者都看到最新值 Computed / getters 派生 state store.doubleCount = store.count 2 Hooks / 監聽器 訂閱 state 變化 store.$subscribe((mutation, state) => { console.log(state.count) }) 組織邏輯 把相關 state 與操作放在一起 比較清楚的模組邏輯,避免散落 function Store Persistence state 只存在於瀏覽器的記憶體 ( RAM ),生命週期受限於頁面執行環境( 刷新頁面、關閉分頁或跨頁,記憶體會被清空 )。

  • frontend
  • store
  • state
  • localStorage
Thursday, January 22, 2026 | 2 minutes Read
Hero Image
Nuxt

Nuxt3 Nuxt 前端,整合 Net 後端全站開發筆記 專案準備 git clone 手動指令安裝 pnpm 安裝相依套件:pnpm install 建立正式編譯檔:pnpm run build 啟動開發伺服器:pnpm run dev pnpm啟動完畢 專案設定的 url 是 設定完畢後,pnpm run dev 開發伺服器完畢,可使用F5 啟動偵錯 測試帳號準備與登入 檔案結構目錄 共同開發說明>開發注意事項>前端開發>檔案結構目錄 撥空了解 Nuxt 結構目錄 https://clairechang.tw/2023/07/07/nuxt3/nuxt-v3-directory-structure/ 請深入閱讀必要了解項目 pages/、layouts/、components/ → 頁面結構與 UI 組合 composables/ → 邏輯封裝、狀態管理 plugins/、middleware/ → 應用啟動與權限控制 stores/ → 使用 Pinia 管理狀態 檔案結構目錄-components component/{pages Name} 作為子元件與父元件 ( pages.vue ) 溝通使用 抽離元件邏輯,避免 pages/{router}/{subRouter}.vue 理由: 行數過多不好閱讀: SOLID 的第一條,SRP ,一個模組不應處理過多事情 頁面可以精簡僅負責整合 api 回傳與 UI 顯示、pages/*.vue 行數控制在 300 行以內。

  • nuxt
  • frontend
  • vue
Thursday, November 27, 2025 | 6 minutes Read
Navigation
  • About
  • Skills
  • Experiences
  • Education
  • Side Projects
Contact me:
  • amanda@ruru910.com
  • adaruru
  • Amanda Chou
  • 0921825964

Liability Notice: This theme is under MIT license. So, you can use it for non-commercial, commercial, or private uses. You can modify or distribute the theme without requiring any permission from the theme author. However, the theme author does not provide any warranty or takes any liability for any issue with the theme.


Toha Theme Logo Toha
© 2025 Copyright.
Powered by Hugo Logo