Logo Amanda's Blog
  • 首頁
  • 自我介紹
  • 技能
  • 工作經歷
  • 學歷
  • 更多的
    個人專案作品
  • 分享
  • 筆記
  • Github
  • 領英
  • 中文
    English 中文
  • Dark Theme
    Light Theme Dark Theme System Theme
Logo Inverted Logo
  • 標籤
  • 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 | 3 分鐘 閱讀
導覽列
  • 自我介紹
  • 技能
  • 工作經歷
  • 學歷
  • 個人專案作品
聯絡方式:
  • amanda@ruru910.com
  • adaruru
  • Amanda Chou
  • 0921825964

免責聲明: 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