diff --git a/packages/duoyun-ui/docs/en/01-guide/03-customize.md b/packages/duoyun-ui/docs/en/01-guide/03-customize.md
index 582a9456..7e1393e1 100644
--- a/packages/duoyun-ui/docs/en/01-guide/03-customize.md
+++ b/packages/duoyun-ui/docs/en/01-guide/03-customize.md
@@ -50,7 +50,7 @@ Extend theme:
 ```ts
 import { extendTheme } from 'duoyun-ui/lib/theme';
 
-export const theme = extendTheme({ myColor: '#f00' });
+export const [theme, updateTheme] = extendTheme({ myColor: '#f00' });
 ```
 
 ## Customize icon
@@ -60,7 +60,7 @@ Currently DuoyunUI uses [Material Icon](https://fonts.google.com/icons?selected=
 ```ts
 import { extendIcons } from 'duoyun-ui/lib/icons';
 
-const icons = extendIcons({
+const [icons, updateIcons] = extendIcons({
   more: `
     <svg part="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
       <path d="M0 0h24v24H0z" fill="none" stroke="none"></path>
diff --git a/packages/duoyun-ui/docs/zh/01-guide/03-customize.md b/packages/duoyun-ui/docs/zh/01-guide/03-customize.md
index 0d016a60..42afd37b 100644
--- a/packages/duoyun-ui/docs/zh/01-guide/03-customize.md
+++ b/packages/duoyun-ui/docs/zh/01-guide/03-customize.md
@@ -50,7 +50,7 @@ updateTheme({ primaryColor: 'blue' });
 ```ts
 import { extendTheme } from 'duoyun-ui/lib/theme';
 
-export const theme = extendTheme({ myColor: '#f00' });
+export const [theme, updateTheme] = extendTheme({ myColor: '#f00' });
 ```
 
 ## 自定义图标
@@ -61,7 +61,7 @@ export const theme = extendTheme({ myColor: '#f00' });
 ```ts
 import { extendIcons } from 'duoyun-ui/lib/icons';
 
-const icons = extendIcons({
+const [icons, updateIcons] = extendIcons({
   more: `
     <svg part="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
       <path d="M0 0h24v24H0z" fill="none" stroke="none"></path>
diff --git a/packages/duoyun-ui/src/elements/badge.ts b/packages/duoyun-ui/src/elements/badge.ts
index 1eccbbbc..23445aa4 100644
--- a/packages/duoyun-ui/src/elements/badge.ts
+++ b/packages/duoyun-ui/src/elements/badge.ts
@@ -63,6 +63,18 @@ const style = createCSSSheet(css`
       anchor-name: --anchor;
     }
   }
+  @supports not (anchor-name: --foo) {
+    :host(:not([hidden])) {
+      display: inline;
+      position: relative;
+    }
+    :host(:not(:empty)) .badge {
+      position: absolute;
+      transform: translate(50%, -50%);
+      top: 0;
+      right: 0;
+    }
+  }
 `);
 
 /**
diff --git a/packages/duoyun-ui/src/elements/chart-tooltip.ts b/packages/duoyun-ui/src/elements/chart-tooltip.ts
index d624913c..196b91c0 100644
--- a/packages/duoyun-ui/src/elements/chart-tooltip.ts
+++ b/packages/duoyun-ui/src/elements/chart-tooltip.ts
@@ -1,7 +1,7 @@
 import { connectStore, adoptedStyle, customElement } from '@mantou/gem/lib/decorators';
 import { GemElement, html, TemplateResult } from '@mantou/gem/lib/element';
 import { createCSSSheet, css, styleMap, classMap } from '@mantou/gem/lib/utils';
-import { createStore, updateStore } from '@mantou/gem/lib/store';
+import { useStore } from '@mantou/gem/lib/store';
 
 import { theme } from '../lib/theme';
 
@@ -81,7 +81,7 @@ type Store = {
   debug: boolean;
 };
 
-const store = createStore<Store>({
+const [store, update] = useStore<Store>({
   data: {},
   x: 0,
   y: 0,
@@ -98,7 +98,7 @@ export class DuoyunChartTooltipElement extends GemElement {
   static instance: DuoyunChartTooltipElement | null = null;
 
   static open = (x: number, y: number, data: Data) => {
-    updateStore(store, { x, y, data });
+    update({ x, y, data });
     if (!ChartTooltip.instance) {
       ChartTooltip.instance = new ChartTooltip();
       document.body.append(ChartTooltip.instance);
diff --git a/packages/duoyun-ui/src/elements/coach-mark.ts b/packages/duoyun-ui/src/elements/coach-mark.ts
index 4594ffac..ff63c52b 100644
--- a/packages/duoyun-ui/src/elements/coach-mark.ts
+++ b/packages/duoyun-ui/src/elements/coach-mark.ts
@@ -2,7 +2,7 @@
 import { connectStore, adoptedStyle, customElement, attribute, numattribute } from '@mantou/gem/lib/decorators';
 import { html } from '@mantou/gem/lib/element';
 import { createCSSSheet, css } from '@mantou/gem/lib/utils';
-import { createStore, updateStore } from '@mantou/gem/lib/store';
+import { useStore } from '@mantou/gem/lib/store';
 import { splice } from '@mantou/gem/helper/i18n';
 
 import { theme, getSemanticColor } from '../lib/theme';
@@ -33,7 +33,7 @@ type Store = {
   opened: boolean;
 };
 
-const store = createStore<Store>({
+const [store, update] = useStore<Store>({
   currentIndex: 0,
   opened: false,
 });
@@ -41,7 +41,7 @@ const store = createStore<Store>({
 export async function openTour(currentIndex = store.currentIndex) {
   if (!tourList[currentIndex]) throw new Error('missing tours');
   await tourList[currentIndex].before?.();
-  updateStore(store, { opened: true, currentIndex });
+  update({ opened: true, currentIndex });
 }
 
 export async function setTours(tours: Tour[] | Record<number, Tour>, options: Partial<Store> = {}) {
@@ -50,22 +50,22 @@ export async function setTours(tours: Tour[] | Record<number, Tour>, options: Pa
   if (opened) {
     await openTour(currentIndex);
   } else {
-    updateStore(store, { opened });
+    update({ opened });
   }
 }
 
 async function closeTour() {
-  updateStore(store, { opened: false });
+  update({ opened: false });
   tourList[store.currentIndex].skip?.();
 }
 
 async function nextTour() {
-  updateStore(store, { opened: false });
+  update({ opened: false });
   ContextMenu.close();
   const { currentIndex } = store;
   const isFinish = currentIndex === tourList.length - 1;
   if (isFinish) {
-    updateStore(store, { currentIndex: tourList.findIndex((e) => !!e) || 0 });
+    update({ currentIndex: tourList.findIndex((e) => !!e) || 0 });
   }
   await tourList[currentIndex].finish?.();
   if (!isFinish) {
diff --git a/packages/duoyun-ui/src/elements/contextmenu.ts b/packages/duoyun-ui/src/elements/contextmenu.ts
index 78625621..0e8f549e 100644
--- a/packages/duoyun-ui/src/elements/contextmenu.ts
+++ b/packages/duoyun-ui/src/elements/contextmenu.ts
@@ -1,7 +1,7 @@
 import { connectStore, adoptedStyle, customElement, refobject, RefObject } from '@mantou/gem/lib/decorators';
 import { html, GemElement, TemplateResult } from '@mantou/gem/lib/element';
 import { createCSSSheet, css, styleMap, classMap } from '@mantou/gem/lib/utils';
-import { createStore, updateStore } from '@mantou/gem/lib/store';
+import { useStore } from '@mantou/gem/lib/store';
 
 import { icons } from '../lib/icons';
 import { locale } from '../lib/locale';
@@ -67,7 +67,7 @@ type ContextMenuOptions = {
   header?: TemplateResult;
 };
 
-const contextmenuStore = createStore<ContextMenuStore>({
+const [contextmenuStore, update] = useStore<ContextMenuStore>({
   menuStack: [],
 });
 
@@ -132,7 +132,7 @@ export class DuoyunContextMenuElement extends GemElement {
     } = options;
     if (Array.isArray(contextmenu) && contextmenu.length === 0) throw new Error('menu length is 0');
     toggleActiveState(activeElement, true);
-    updateStore(contextmenuStore, {
+    update({
       width,
       maxHeight,
       activeElement,
@@ -213,7 +213,7 @@ export class DuoyunContextMenuElement extends GemElement {
           openLeft ||
           (menuStackIndex > 0 && menuStack[menuStackIndex].x < menuStack[menuStackIndex - 1].x)) &&
         left > 300;
-      updateStore(contextmenuStore, {
+      update({
         menuStack: [
           ...menuStack.slice(0, menuStackIndex + 1),
           {
@@ -225,7 +225,7 @@ export class DuoyunContextMenuElement extends GemElement {
         ],
       });
     } else {
-      updateStore(contextmenuStore, {
+      update({
         menuStack: menuStack.slice(0, menuStackIndex + 1),
       });
     }
@@ -241,7 +241,7 @@ export class DuoyunContextMenuElement extends GemElement {
   #onKeydown = (evt: KeyboardEvent, menuStackIndex: number) => {
     evt.stopPropagation();
     const focusPrevMenu = () => {
-      updateStore(contextmenuStore, {
+      update({
         menuStack: contextmenuStore.menuStack.slice(0, menuStackIndex),
       });
       this.#menuElements[menuStackIndex - 1]?.focus();
@@ -270,13 +270,13 @@ export class DuoyunContextMenuElement extends GemElement {
       const showToTop = innerHeight - bottom < height + 2 * this.#offset && top > innerHeight - bottom;
       const x = showToLeft ? right - width : left;
       const y = showToTop ? Math.max(top - height - 2 * this.#offset, 0) : bottom;
-      updateStore(contextmenuStore, {
+      update({
         maxHeight: maxHeight || `${showToTop ? top - 2 * this.#offset : innerHeight - bottom - 2 * this.#offset}px`,
         menuStack: [{ ...menu, x, y }],
       });
     } else {
       const y = innerHeight - menu.y > width ? menu.y : Math.max(0, menu.y - (scrollHeight - clientHeight));
-      updateStore(contextmenuStore, { menuStack: [{ ...menu, y }] });
+      update({ menuStack: [{ ...menu, y }] });
     }
   };
 
diff --git a/packages/duoyun-ui/src/lib/icons.ts b/packages/duoyun-ui/src/lib/icons.ts
index babca1ca..b473b9e5 100644
--- a/packages/duoyun-ui/src/lib/icons.ts
+++ b/packages/duoyun-ui/src/lib/icons.ts
@@ -1,4 +1,4 @@
-import { createStore, updateStore } from '@mantou/gem/lib/store';
+import { useStore } from '@mantou/gem/lib/store';
 import { raw } from '@mantou/gem/lib/utils';
 
 // 24x24, single path
@@ -108,9 +108,12 @@ const defaultIcons = {
   ),
 };
 
-export const icons = createStore(defaultIcons);
+export const [icons, updateIcons] = useStore(defaultIcons);
 
 export function extendIcons<T extends Record<string, string>>(customIcons: Partial<typeof defaultIcons> & T) {
-  updateStore(icons, customIcons);
-  return icons as unknown as typeof defaultIcons & T;
+  updateIcons(customIcons);
+  return [
+    icons as unknown as typeof defaultIcons & T,
+    updateIcons as (customIcons: Partial<typeof defaultIcons> & T) => void,
+  ] as const;
 }
diff --git a/packages/duoyun-ui/src/lib/theme.ts b/packages/duoyun-ui/src/lib/theme.ts
index 4cd058d8..944faf81 100644
--- a/packages/duoyun-ui/src/lib/theme.ts
+++ b/packages/duoyun-ui/src/lib/theme.ts
@@ -1,4 +1,4 @@
-import { createTheme, getThemeStore, updateTheme as changeTheme } from '@mantou/gem/helper/theme';
+import { getThemeStore, useTheme } from '@mantou/gem/helper/theme';
 
 export function getSemanticColor(semantic?: string) {
   switch (semantic) {
@@ -64,14 +64,10 @@ export const darkTheme: Partial<typeof lightTheme> = {
   maskAlpha: '0.4',
 };
 
-export const theme = createTheme({ ...lightTheme });
+export const [theme, updateTheme] = useTheme({ ...lightTheme });
 export const themeStore = getThemeStore(theme);
 
-export const updateTheme = (tm: Partial<typeof lightTheme>) => {
-  changeTheme(theme, tm);
-};
-
 export function extendTheme<T extends Record<string, string>>(tm: Partial<typeof lightTheme> & T) {
-  changeTheme(theme, tm);
-  return theme as unknown as typeof lightTheme & T;
+  updateTheme(tm);
+  return [theme as typeof lightTheme & T, updateTheme as (tm: Partial<typeof lightTheme> & T) => void] as const;
 }
diff --git a/packages/duoyun-ui/src/lib/utils.ts b/packages/duoyun-ui/src/lib/utils.ts
index 3365da50..84e59a30 100644
--- a/packages/duoyun-ui/src/lib/utils.ts
+++ b/packages/duoyun-ui/src/lib/utils.ts
@@ -1,4 +1,4 @@
-import { createStore, Store, connect, updateStore } from '@mantou/gem/lib/store';
+import { Store, connect, updateStore, useStore } from '@mantou/gem/lib/store';
 import { render, TemplateResult } from '@mantou/gem/lib/element';
 import { NonPrimitive, cleanObject } from '@mantou/gem/lib/utils';
 
@@ -324,12 +324,13 @@ export function setBodyInert(modal: HTMLElement) {
 }
 
 /**Create auto cache(localStorage) Store */
-export function createCacheStore<T extends Record<string, any>>(
+export function useCacheStore<T extends Record<string, any>>(
   storageKey: string,
   initStore: T,
   options?: {
     cacheExcludeKeys?: (keyof T)[];
     prefix?: string | (() => string | undefined);
+    // 重新初始化 store，例如切换用户
     depStore?: Store<NonPrimitive>;
   },
 ) {
@@ -351,7 +352,7 @@ export function createCacheStore<T extends Record<string, any>>(
   const cacheExcludeKeys = new Set(options?.cacheExcludeKeys || []);
   let key = getKey();
 
-  const store = createStore<T>(getStoreStore(key));
+  const [store, updater] = useStore<T>(getStoreStore(key));
 
   if (options?.depStore) {
     connect(options.depStore, () => {
@@ -372,5 +373,11 @@ export function createCacheStore<T extends Record<string, any>>(
 
   window.addEventListener('pagehide', saveStore);
 
-  return [store, saveStore] as const;
+  return [store, updater, saveStore] as const;
 }
+
+/**@deprecated use `useCacheStore` */
+export const createCacheStore = (...args: Parameters<typeof useCacheStore>) => {
+  const [store, , save] = useCacheStore(...args);
+  return [store, save] as const;
+};
diff --git a/packages/gem-book/src/element/elements/main.ts b/packages/gem-book/src/element/elements/main.ts
index b17b6e2b..902602f5 100644
--- a/packages/gem-book/src/element/elements/main.ts
+++ b/packages/gem-book/src/element/elements/main.ts
@@ -1,11 +1,11 @@
-import { html, GemElement, customElement, css, property, createCSSSheet, adoptedStyle, updateStore } from '@mantou/gem';
+import { html, GemElement, customElement, css, property, createCSSSheet, adoptedStyle } from '@mantou/gem';
 import { Renderer, parse } from 'marked';
 import { mediaQuery } from '@mantou/gem/helper/mediaquery';
 
 import { theme } from '../helper/theme';
 import { checkBuiltInPlugin } from '../lib/utils';
 
-import { tocStore } from './toc';
+import { updateTocStore } from './toc';
 
 import '@mantou/gem/elements/unsafe';
 import '@mantou/gem/elements/link';
@@ -89,7 +89,7 @@ export class Main extends GemElement {
   };
 
   #updateToc = () =>
-    updateStore(tocStore, {
+    updateTocStore({
       elements: [...this.shadowRoot!.querySelectorAll<HTMLHeadingElement>('.markdown-header')].slice(1),
     });
 
@@ -303,7 +303,7 @@ export class Main extends GemElement {
             opacity: 1;
           }
           h1 {
-            font-size: 2.5rem;
+            font-size: 2.3rem;
           }
         }
       </style>
diff --git a/packages/gem-book/src/element/elements/nav.ts b/packages/gem-book/src/element/elements/nav.ts
index 23d722f9..0791b1d4 100644
--- a/packages/gem-book/src/element/elements/nav.ts
+++ b/packages/gem-book/src/element/elements/nav.ts
@@ -17,7 +17,7 @@ import { capitalize, isSameOrigin } from '../lib/utils';
 import { bookStore } from '../store';
 
 import { icons } from './icons';
-import { sidebarStore, toggleSidebar } from './sidebar';
+import { sidebarStore, updateSidebarStore } from './sidebar';
 
 import '@mantou/gem/elements/link';
 import '@mantou/gem/elements/use';
@@ -171,7 +171,11 @@ export class Nav extends GemElement {
           }
         }
       </style>
-      <gem-use class="menu" @click=${toggleSidebar} .element=${sidebarStore.open ? icons.close : icons.menu}></gem-use>
+      <gem-use
+        class="menu"
+        @click=${() => updateSidebarStore({ open: !sidebarStore.open })}
+        .element=${sidebarStore.open ? icons.close : icons.menu}
+      ></gem-use>
       ${this.logo ? html`<gem-book-nav-logo></gem-book-nav-logo>` : ''}
       <div class="left">
         ${internals.map((item) => this.renderInternalItem(item))}
diff --git a/packages/gem-book/src/element/elements/sidebar.ts b/packages/gem-book/src/element/elements/sidebar.ts
index fd6f637b..890a4f41 100644
--- a/packages/gem-book/src/element/elements/sidebar.ts
+++ b/packages/gem-book/src/element/elements/sidebar.ts
@@ -6,11 +6,9 @@ import {
   connectStore,
   classMap,
   state,
-  createStore,
   connect,
-  updateStore,
   history,
-  disconnect,
+  useStore,
 } from '@mantou/gem';
 import { mediaQuery } from '@mantou/gem/helper/mediaquery';
 
@@ -26,10 +24,7 @@ import '@mantou/gem/elements/use';
 import './side-link';
 import './nav-logo';
 
-export const sidebarStore = createStore({ open: false });
-
-const closeSidebar = () => updateStore(sidebarStore, { open: false });
-export const toggleSidebar = () => updateStore(sidebarStore, { open: !sidebarStore.open });
+export const [sidebarStore, updateSidebarStore] = useStore({ open: false });
 
 @customElement('gem-book-sidebar')
 @connectStore(bookStore)
@@ -219,7 +214,7 @@ export class SideBar extends GemElement {
             position: fixed;
             background: ${theme.backgroundColor};
             width: 100%;
-            height: calc(100vh - ${theme.headerHeight});
+            height: calc(100dvh - ${theme.headerHeight});
             top: ${theme.headerHeight};
             z-index: 3;
           }
@@ -267,7 +262,6 @@ export class SideBar extends GemElement {
   }
 
   mounted() {
-    connect(history.store, closeSidebar);
-    return () => disconnect(history.store, closeSidebar);
+    return connect(history.store, () => updateSidebarStore({ open: false }));
   }
 }
diff --git a/packages/gem-book/src/element/elements/toc.ts b/packages/gem-book/src/element/elements/toc.ts
index 5d250933..caabb19f 100644
--- a/packages/gem-book/src/element/elements/toc.ts
+++ b/packages/gem-book/src/element/elements/toc.ts
@@ -6,15 +6,15 @@ import {
   createCSSSheet,
   css,
   connectStore,
-  createStore,
   classMap,
+  useStore,
 } from '@mantou/gem';
 
 import { theme, themeStore } from '../helper/theme';
 
 import '@mantou/gem/elements/link';
 
-export const tocStore = createStore<{ elements: HTMLHeadingElement[] }>({
+export const [tocStore, updateTocStore] = useStore<{ elements: HTMLHeadingElement[] }>({
   elements: [],
 });
 
diff --git a/packages/gem-book/src/element/store.ts b/packages/gem-book/src/element/store.ts
index 6972cd77..1ac2d3b2 100644
--- a/packages/gem-book/src/element/store.ts
+++ b/packages/gem-book/src/element/store.ts
@@ -1,4 +1,4 @@
-import { connect, createStore, html, updateStore, history } from '@mantou/gem';
+import { connect, html, history, useStore } from '@mantou/gem';
 import { RouteItem, GemLightRouteElement } from '@mantou/gem/elements/route';
 import { I18n } from '@mantou/gem/helper/i18n';
 
@@ -31,7 +31,7 @@ interface CurrentBookConfig {
   isDevMode: () => boolean;
 }
 
-export const bookStore = createStore<Partial<CurrentBookConfig>>({});
+export const [bookStore, updateBookStore] = useStore<Partial<CurrentBookConfig>>({});
 
 function getI18nSidebar(config: BookConfig | undefined) {
   let sidebar: NavItem[] = [];
@@ -238,7 +238,7 @@ export function updateBookConfig(config?: BookConfig, gemBookElement?: GemBookEl
   const currentLinks = flatNav(currentSidebar).filter(
     (e) => !e.sidebarIgnore && (!config?.homeMode || e.link !== homePage),
   );
-  updateStore(bookStore, {
+  updateBookStore({
     config,
     links,
     nav,
@@ -251,7 +251,7 @@ export function updateBookConfig(config?: BookConfig, gemBookElement?: GemBookEl
     currentLinks,
   });
   if (gemBookElement) {
-    updateStore(bookStore, {
+    updateBookStore({
       isDevMode: () => gemBookElement.dev,
       getCurrentLink: () => {
         return gemBookElement?.routeRef.element?.currentRoute?.data as NavItemWithLink;
diff --git a/packages/gem-devtools/src/store.ts b/packages/gem-devtools/src/store.ts
index 4d6332a5..2fd54842 100644
--- a/packages/gem-devtools/src/store.ts
+++ b/packages/gem-devtools/src/store.ts
@@ -1,4 +1,4 @@
-import { createStore, updateStore } from '@mantou/gem';
+import { useStore } from '@mantou/gem';
 
 const types = typeof ('' as any);
 type Type = typeof types | 'element' | 'null';
@@ -43,19 +43,11 @@ export class PanelStore {
   staticMember = new Array<Item>();
 }
 
-export const panelStore = createStore({ ...new PanelStore(), isGemElement: false });
+export const [panelStore, changePanelStore] = useStore({ ...new PanelStore(), isGemElement: false });
 
 export class ConfigureStore {
   currentFrameURL = '';
   frames: string[] = [];
 }
 
-export const configureStore = createStore(new ConfigureStore());
-
-export function changePanelStore(newPanelData: PanelStore) {
-  updateStore(panelStore, newPanelData);
-}
-
-export function changeConfigureStore(data: Partial<ConfigureStore>) {
-  updateStore(configureStore, data);
-}
+export const [configureStore, changeConfigureStore] = useStore(new ConfigureStore());
diff --git a/packages/gem-examples/src/cascader/index.ts b/packages/gem-examples/src/cascader/index.ts
index 3083bc0c..13b180a3 100644
--- a/packages/gem-examples/src/cascader/index.ts
+++ b/packages/gem-examples/src/cascader/index.ts
@@ -1,4 +1,4 @@
-import { connect, createStore, html, render, updateStore } from '@mantou/gem';
+import { connect, html, render, useStore } from '@mantou/gem';
 import type { Option } from 'duoyun-ui/elements/cascader-picker';
 import { sleep } from 'duoyun-ui/lib/utils';
 
@@ -7,7 +7,7 @@ import 'duoyun-ui/elements/loading';
 
 import '../elements/layout';
 
-const store = createStore({
+const [store, update] = useStore({
   selected: [['Item 3', 'Item 3.3', 'Item 3.3.1']],
   options: [
     { label: 'Item 1' },
@@ -29,7 +29,7 @@ const store = createStore({
 });
 
 function onChange({ detail }: CustomEvent) {
-  updateStore(store, { selected: detail });
+  update({ selected: detail });
 }
 
 async function onExpand({ detail }: CustomEvent<Option>) {
@@ -38,7 +38,7 @@ async function onExpand({ detail }: CustomEvent<Option>) {
     detail.children = Array(4)
       .fill(null)
       .map((_, index) => ({ label: `Item 4.${index + 1}` }));
-    updateStore(store, { options: [...store.options] });
+    update({ options: [...store.options] });
   }
 }
 
diff --git a/packages/gem-examples/src/decorator/index.ts b/packages/gem-examples/src/decorator/index.ts
index b0a1b17c..d2369a41 100644
--- a/packages/gem-examples/src/decorator/index.ts
+++ b/packages/gem-examples/src/decorator/index.ts
@@ -1,6 +1,4 @@
 import {
-  createStore,
-  updateStore,
   createCSSSheet,
   GemElement,
   html,
@@ -12,6 +10,7 @@ import {
   adoptedStyle,
   css,
   render,
+  useStore,
 } from '@mantou/gem';
 
 import '../elements/layout';
@@ -23,7 +22,7 @@ interface GlobalState {
   now: Date;
 }
 
-const store = createStore<GlobalState>({
+const [store, update] = useStore<GlobalState>({
   msg: [1, 2],
   now: new Date(),
 });
@@ -57,7 +56,7 @@ export class App extends GemElement {
 
   onSayHi = () => {
     const [foo, bar] = store.msg;
-    updateStore(store, {
+    update({
       msg: [bar, foo],
       now: new Date(),
     });
diff --git a/packages/gem-examples/src/hello-world/index.ts b/packages/gem-examples/src/hello-world/index.ts
index 9780464e..5e56461d 100644
--- a/packages/gem-examples/src/hello-world/index.ts
+++ b/packages/gem-examples/src/hello-world/index.ts
@@ -1,10 +1,10 @@
-import { render, GemElement, createStore, updateStore, html } from '@mantou/gem';
+import { render, GemElement, html, useStore } from '@mantou/gem';
 import { connectStore, customElement } from '@mantou/gem/lib/decorators';
 
 import '../elements/layout';
 
 // 新建全局数据对象
-const store = createStore({
+const [store, update] = useStore({
   a: 1,
 });
 
@@ -13,7 +13,7 @@ const store = createStore({
 @connectStore(store)
 export class HelloWorld extends GemElement {
   clickHandle = () => {
-    updateStore(store, { a: ++store.a });
+    update({ a: ++store.a });
   };
   render() {
     return html`
diff --git a/packages/gem-examples/src/multi-page/api.ts b/packages/gem-examples/src/multi-page/api.ts
index ea26190b..b9defe0e 100644
--- a/packages/gem-examples/src/multi-page/api.ts
+++ b/packages/gem-examples/src/multi-page/api.ts
@@ -1,10 +1,8 @@
-import { updateStore } from '@mantou/gem';
-
-import store from './store';
+import { updatePageA } from './store';
 
 export default {
   async getData() {
     const text = await new Promise<string>((res) => setTimeout(() => res('pageA async data'), 1000));
-    updateStore(store.pageA, { text });
+    updatePageA({ text });
   },
 };
diff --git a/packages/gem-examples/src/multi-page/page-a.ts b/packages/gem-examples/src/multi-page/page-a.ts
index a7a1fde1..6dcb3021 100644
--- a/packages/gem-examples/src/multi-page/page-a.ts
+++ b/packages/gem-examples/src/multi-page/page-a.ts
@@ -1,17 +1,17 @@
 import { GemElement, html } from '@mantou/gem';
 
-import storeSet from './store';
 import api from './api';
+import { pageA } from './store';
 
 customElements.define(
   'app-page-a',
   class extends GemElement {
-    static observedStores = [storeSet.pageA];
+    static observedStores = [pageA];
     mounted() {
       api.getData();
     }
     render() {
-      return html`<slot></slot> ${storeSet.pageA.text}`;
+      return html`<slot></slot> ${pageA.text}`;
     }
   },
 );
diff --git a/packages/gem-examples/src/multi-page/page-b.ts b/packages/gem-examples/src/multi-page/page-b.ts
index a3c2754d..687711d5 100644
--- a/packages/gem-examples/src/multi-page/page-b.ts
+++ b/packages/gem-examples/src/multi-page/page-b.ts
@@ -1,13 +1,13 @@
 import { GemElement, html } from '@mantou/gem';
 
-import storeSet from './store';
+import { pageB } from './store';
 
 customElements.define(
   'app-page-b',
   class extends GemElement {
-    static observedStores = [storeSet.pageB];
+    static observedStores = [pageB];
     render() {
-      return html`<slot></slot> ${storeSet.pageB.text}`;
+      return html`<slot></slot> ${pageB.text}`;
     }
   },
 );
diff --git a/packages/gem-examples/src/multi-page/store.ts b/packages/gem-examples/src/multi-page/store.ts
index 909231a8..0195495f 100644
--- a/packages/gem-examples/src/multi-page/store.ts
+++ b/packages/gem-examples/src/multi-page/store.ts
@@ -1,10 +1,9 @@
-import { createStoreSet } from '@mantou/gem';
+import { useStore } from '@mantou/gem';
 
-export default createStoreSet({
-  pageA: {
-    text: 'this is page A',
-  },
-  pageB: {
-    text: 'this is page B',
-  },
+export const [pageA, updatePageA] = useStore({
+  text: 'this is page A',
+});
+
+export const [pageB, updatePageB] = useStore({
+  text: 'this is page B',
 });
diff --git a/packages/gem-examples/src/perf-demo/index.ts b/packages/gem-examples/src/perf-demo/index.ts
index cb72fabf..ee709ec4 100644
--- a/packages/gem-examples/src/perf-demo/index.ts
+++ b/packages/gem-examples/src/perf-demo/index.ts
@@ -1,13 +1,13 @@
-import { GemElement, createStore, updateStore, html, render } from '@mantou/gem';
+import { GemElement, html, render, useStore } from '@mantou/gem';
 
 import '../elements/layout';
 
-const store = createStore({
+const [store, update] = useStore({
   number: 1,
 });
 
 setInterval(() => {
-  updateStore(store, { number: (store.number % 10) + 1 });
+  update({ number: (store.number % 10) + 1 });
 }, 1000);
 
 customElements.define(
@@ -139,8 +139,8 @@ render(
 );
 
 const start = Date.now();
-function update() {
+function tick() {
   app.elapsed = Date.now() - start;
-  requestAnimationFrame(update);
+  requestAnimationFrame(tick);
 }
-requestAnimationFrame(update);
+requestAnimationFrame(tick);
diff --git a/packages/gem-examples/src/tree/index.ts b/packages/gem-examples/src/tree/index.ts
index 2a8d1d8e..61db8bba 100644
--- a/packages/gem-examples/src/tree/index.ts
+++ b/packages/gem-examples/src/tree/index.ts
@@ -1,4 +1,4 @@
-import { connect, createStore, html, render, updateStore } from '@mantou/gem';
+import { connect, html, render, useStore } from '@mantou/gem';
 import type { MouseEventDetail, TreeItem } from 'duoyun-ui/elements/tree';
 import { ContextMenu } from 'duoyun-ui/elements/contextmenu';
 import { sleep } from 'duoyun-ui/lib/utils';
@@ -8,7 +8,7 @@ import 'duoyun-ui/elements/loading';
 
 import '../elements/layout';
 
-const store = createStore({
+const [store, update] = useStore({
   selected: 'Item 3.3.1',
   data: [
     { label: 'Item 1' },
@@ -41,13 +41,13 @@ async function onExpand({ detail }: CustomEvent<TreeItem>) {
     detail.children = Array(4)
       .fill(null)
       .map((_, index) => ({ label: `Item 4.${index + 1}` }));
-    updateStore(store, { data: [...store.data] });
+    update({ data: [...store.data] });
   }
 }
 
 function onClick({ detail }: CustomEvent<MouseEventDetail>) {
   if (detail.value.type === 'folder') return;
-  updateStore(store, { selected: detail.value });
+  update({ selected: detail.value });
 }
 
 function onContextMenu({ detail }: CustomEvent<MouseEventDetail>) {
diff --git a/packages/gem/docs/en/003-api/003-store.md b/packages/gem/docs/en/003-api/003-store.md
index 67e6fdcf..c009f211 100644
--- a/packages/gem/docs/en/003-api/003-store.md
+++ b/packages/gem/docs/en/003-api/003-store.md
@@ -1,9 +1,9 @@
 # Store
 
-| API name         | description                                                                          |
-| ---------------- | ------------------------------------------------------------------------------------ |
-| `createStore`    | Create a `Store`                                                                     |
-| `createStoreSet` | Create multiple stores at once                                                       |
-| `updateStore`    | Use `Object.assign` to update a `Store`                                              |
-| `connect`        | Connect a callback function to the `Store`, asynchronously called by `Store` updated |
-| `disconnect`     | Disconnect a callback function from `Store`                                          |
+| API name      | description                                                                          |
+| ------------- | ------------------------------------------------------------------------------------ |
+| `createStore` | Create a `Store`                                                                     |
+| `updateStore` | Use `Object.assign` to update a `Store`                                              |
+| `useStore`    | Create `Store` and return contain updater                                            |
+| `connect`     | Connect a callback function to the `Store`, asynchronously called by `Store` updated |
+| `disconnect`  | Disconnect a callback function from `Store`                                          |
diff --git a/packages/gem/docs/zh/003-api/003-store.md b/packages/gem/docs/zh/003-api/003-store.md
index fc046672..7259d3ee 100644
--- a/packages/gem/docs/zh/003-api/003-store.md
+++ b/packages/gem/docs/zh/003-api/003-store.md
@@ -1,9 +1,9 @@
 # Store
 
-| API 名称         | 描述                                                          |
-| ---------------- | ------------------------------------------------------------- |
-| `createStore`    | 创建一个 `Store`                                              |
-| `createStoreSet` | 一次性创建多个 `Store`                                        |
-| `updateStore`    | 使用 `Object.assign` 更新一个 `Store`                         |
-| `connect`        | 将一个回调函数连接到 `Store`, 当 `Store` 更新时会异步进行调用 |
-| `disconnect`     | 将一个回调函数从 `Store` 断开连接                             |
+| API 名称      | 描述                                                          |
+| ------------- | ------------------------------------------------------------- |
+| `createStore` | 创建一个 `Store`                                              |
+| `updateStore` | 使用 `Object.assign` 更新一个 `Store`                         |
+| `useStore`    | 创建一个 `Store`，返回包括更新函数                            |
+| `connect`     | 将一个回调函数连接到 `Store`, 当 `Store` 更新时会异步进行调用 |
+| `disconnect`  | 将一个回调函数从 `Store` 断开连接                             |
diff --git a/packages/gem/src/elements/base/title.ts b/packages/gem/src/elements/base/title.ts
index 4cb71219..1c663a9e 100644
--- a/packages/gem/src/elements/base/title.ts
+++ b/packages/gem/src/elements/base/title.ts
@@ -15,7 +15,7 @@
 
 import { GemElement, html } from '../../lib/element';
 import { attribute, boolattribute } from '../../lib/decorators';
-import { updateStore, connect, disconnect } from '../../lib/store';
+import { updateStore, connect } from '../../lib/store';
 import { titleStore } from '../../lib/history';
 
 const defaultTitle = document.title;
@@ -68,10 +68,7 @@ export class GemTitleElement extends GemElement {
 
   mounted = () => {
     this.effect(
-      () => {
-        if (!this.inert) connect(titleStore, this.update);
-        return () => disconnect(titleStore, this.update);
-      },
+      () => !this.inert && connect(titleStore, this.update),
       () => [this.inert],
     );
   };
diff --git a/packages/gem/src/helper/theme.ts b/packages/gem/src/helper/theme.ts
index eada6652..1fcd5ca1 100644
--- a/packages/gem/src/helper/theme.ts
+++ b/packages/gem/src/helper/theme.ts
@@ -7,12 +7,14 @@ type SomeType<T> = {
 
 const themeStoreMap = new WeakMap();
 
+/**获取主题原始值 */
 export function getThemeStore<T>(theme: SomeType<T>) {
   return themeStoreMap.get(theme) as Store<T>;
 }
 
 const themePropsMap = new WeakMap();
 
+/**获取 css 变量名 */
 export function getThemeProps<T>(theme: SomeType<T>) {
   return themePropsMap.get(theme) as SomeType<T>;
 }
@@ -62,3 +64,8 @@ export function updateTheme<T = Record<string, unknown>>(theme: SomeType<T>, new
   updateStore(getThemeStore(theme), newThemeObj);
   setThemeFnMap.get(theme)();
 }
+
+export function useTheme<T extends Record<string, unknown>>(themeObj: T) {
+  const theme = createTheme(themeObj);
+  return [theme, (newThemeObj: Partial<T>) => updateTheme(theme, newThemeObj)] as const;
+}
diff --git a/packages/gem/src/lib/element.ts b/packages/gem/src/lib/element.ts
index d7417787..c7c38810 100644
--- a/packages/gem/src/lib/element.ts
+++ b/packages/gem/src/lib/element.ts
@@ -359,6 +359,7 @@ export abstract class GemElement<T = Record<string, unknown>> extends HTMLElemen
     return GemElement.#final;
   }
 
+  #disconnectStore?: (() => void)[];
   #connectedCallback = () => {
     if (this.#isAppendReason) {
       this.#isAppendReason = false;
@@ -370,9 +371,7 @@ export abstract class GemElement<T = Record<string, unknown>> extends HTMLElemen
 
     this.willMount?.();
     const { observedStores, rootElement } = this.constructor as typeof GemElement;
-    observedStores?.forEach((store) => {
-      connect(store, this.#update);
-    });
+    this.#disconnectStore = observedStores?.map((store) => connect(store, this.#update));
     const temp = this.#render();
     temp !== undefined && render(temp, this.#renderRoot);
     this.#isMounted = true;
@@ -436,10 +435,7 @@ export abstract class GemElement<T = Record<string, unknown>> extends HTMLElemen
       return;
     }
     this.#isMounted = false;
-    const { observedStores } = this.constructor as typeof GemElement;
-    observedStores?.forEach((store) => {
-      disconnect(store, this.#update);
-    });
+    this.#disconnectStore?.forEach((disconnect) => disconnect());
     execCallback(this.#unmountCallback);
     this.unmounted?.();
     this.#effectList?.forEach(({ preCallback }) => execCallback(preCallback));
diff --git a/packages/gem/src/lib/history.ts b/packages/gem/src/lib/history.ts
index 78afe6f5..50ac669f 100644
--- a/packages/gem/src/lib/history.ts
+++ b/packages/gem/src/lib/history.ts
@@ -1,6 +1,6 @@
 // https://github.com/WICG/navigation-api#stakeholder-feedback
 
-import { createStore, updateStore, connect } from './store';
+import { connect, useStore } from './store';
 import { QueryString, cleanObject, GemError, absoluteLocation } from './utils';
 
 const nativeHistory = window.history;
@@ -18,7 +18,7 @@ export interface HistoryState {
   [index: string]: any;
 }
 
-const store = createStore<HistoryState>({
+const [store, updateHistoryStore] = useStore<HistoryState>({
   $hasCloseHandle: false,
   $hasOpenHandle: false,
   $hasShouldCloseHandle: false,
@@ -89,7 +89,8 @@ function updateHistory(p: UpdateHistoryParams, native: typeof nativeHistory.push
     ...data,
   };
   paramsMap.set(state.$key, params);
-  updateStore(cleanObject(store), state);
+  cleanObject(store);
+  updateHistoryStore(state);
   const url = getUrlBarPath(path) + new QueryString(query) + hash;
   const prevHash = decodeURIComponent(location.hash);
   native(state, title, url);
@@ -107,7 +108,8 @@ function updateHistoryByNative(data: any, title: string, originUrl: string, nati
   const { pathname, search, hash } = new URL(originUrl, location.origin + location.pathname);
   const params = normalizeParams({ path: pathname, query: new QueryString(search), hash, title, data });
   paramsMap.set(state.$key, params);
-  updateStore(cleanObject(store), state);
+  cleanObject(store);
+  updateHistoryStore(state);
   const url = getUrlBarPath(pathname) + params.query + hash;
   const prevHash = location.hash;
   native(state, title, url);
@@ -115,7 +117,7 @@ function updateHistoryByNative(data: any, title: string, originUrl: string, nati
   if (prevHash !== hash) window.dispatchEvent(new CustomEvent('hashchange'));
 }
 
-const gemBasePathStore = createStore({
+const [gemBasePathStore, updateBasePathStore] = useStore({
   basePath: '',
 });
 
@@ -128,7 +130,7 @@ class GemHistory {
   }
   set basePath(basePath: string) {
     // 应用初始化的时候设置
-    updateStore(gemBasePathStore, { basePath });
+    updateBasePathStore({ basePath });
     // paramsMap 更新后 ui 才会更新
     Object.assign(paramsMap.get(store.$key)!, { path: getInternalPath(location.pathname) });
   }
@@ -137,7 +139,7 @@ class GemHistory {
   }
   updateParams(params: UpdateHistoryParams) {
     Object.assign(paramsMap.get(store.$key)!, params);
-    updateStore(store, {});
+    updateHistoryStore();
   }
   push(params: UpdateHistoryParams) {
     updateHistory(params, nativePushState);
@@ -164,7 +166,7 @@ class GemHistory {
 // `<gem-**>` 只读写父应用 `basePath`
 const gemHistory = new GemHistory();
 
-const gemTitleStore = createStore({ title: '' });
+const [gemTitleStore, updateTitleStore] = useStore({ title: '' });
 
 const _GEMHISTORY = { history: gemHistory, titleStore: gemTitleStore, basePathStore: gemBasePathStore };
 
@@ -197,7 +199,7 @@ if (!window._GEMHISTORY) {
     const { pathname, search, hash } = location;
     gemHistory.replace({ path: pathname, query: search, hash });
   } else if (nativeHistory.state.$hasCloseHandle) {
-    updateStore(store, nativeHistory.state);
+    updateHistoryStore(nativeHistory.state);
     const params = normalizeParams({ title: document.title });
     paramsMap.set(store.$key, params);
     // 有 handle 返回键的页面刷新需要清除返回 handler
@@ -205,7 +207,7 @@ if (!window._GEMHISTORY) {
   } else {
     // 有 gem 历史的正常普通刷新, 储存 params
     const params = normalizeParams({ title: document.title, hash: location.hash });
-    updateStore(store, {
+    updateHistoryStore({
       $key: getKey(),
       ...(nativeHistory.state || {}),
     });
@@ -222,7 +224,7 @@ if (!window._GEMHISTORY) {
   connect(store, () => {
     const { title } = gemHistory.getParams();
     if (title !== gemTitleStore.title) {
-      updateStore(gemTitleStore, { title });
+      updateTitleStore({ title });
     }
   });
 
@@ -290,7 +292,8 @@ if (!window._GEMHISTORY) {
       }
     }
 
-    updateStore(cleanObject(store), newState);
+    cleanObject(store);
+    updateHistoryStore(newState);
   });
 }
 
diff --git a/packages/gem/src/lib/store.ts b/packages/gem/src/lib/store.ts
index c8f03748..51757b24 100644
--- a/packages/gem/src/lib/store.ts
+++ b/packages/gem/src/lib/store.ts
@@ -13,32 +13,22 @@ export function createStore<T extends NonPrimitive>(originStore: T) {
   return originStore as Store<T>;
 }
 
-interface StoreObjectSet {
-  [store: string]: NonPrimitive;
-}
-export type StoreSet<T> = {
-  [P in keyof T]: T[P] & Store<T[P]>;
-};
-export function createStoreSet<T extends StoreObjectSet>(originStoreSet: T) {
-  const keys = Object.keys(originStoreSet);
-  keys.forEach((key) => {
-    createStore(originStoreSet[key]);
-  });
-
-  return originStoreSet as StoreSet<T>;
-}
-
 export function updateStore<T extends NonPrimitive>(store: Store<T>, value?: Partial<T>) {
   Object.assign(store, value);
-  const listeners = StoreListenerMap.get(store);
-  listeners?.forEach((func) => {
+  StoreListenerMap.get(store)?.forEach((func) => {
     addMicrotask(func);
   });
 }
 
+export function useStore<T extends NonPrimitive>(originStore: T) {
+  const store = createStore(originStore);
+  return [store, (value?: Partial<T>) => updateStore(store, value)] as const;
+}
+
 export function connect<T extends NonPrimitive>(store: Store<T>, func: () => void) {
   const listeners = StoreListenerMap.get(store);
   listeners?.add(func);
+  return () => listeners?.delete(func);
 }
 
 export function disconnect<T extends NonPrimitive>(store: Store<T>, func: () => void) {
diff --git a/packages/gem/src/test/store.test.ts b/packages/gem/src/test/store.test.ts
index 9bc53889..6e1997a8 100644
--- a/packages/gem/src/test/store.test.ts
+++ b/packages/gem/src/test/store.test.ts
@@ -1,6 +1,6 @@
 import { expect, aTimeout } from '@open-wc/testing';
 
-import { StoreListenerMap, createStore, createStoreSet, updateStore, connect, disconnect } from '../lib/store';
+import { StoreListenerMap, createStore, updateStore, connect, disconnect } from '../lib/store';
 
 describe('store 测试', () => {
   it('create store', () => {
@@ -8,8 +8,6 @@ describe('store 测试', () => {
     const store = createStore(origin);
     expect(store).to.equal(origin);
     expect(!!StoreListenerMap.get(store)).to.equal(true);
-    const stores = createStoreSet({ a: {} });
-    expect(!!StoreListenerMap.get(stores.a)).to.equal(true);
   });
   it('update store', async () => {
     const store = createStore({ a: 1 });