diff --git a/.eslintrc.js b/.eslintrc.js
index 0661224..74ea6d3 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,6 +1,6 @@
 module.exports = {
   root: true,
-  extends: ['@daotl/eslint-config-vue/typescript'],
+  extends: '@daotl/eslint-config-vue/typescript',
   parserOptions: {
     project: 'tsconfig.json',
   },
diff --git a/README.md b/README.md
index 2ef6769..a48f012 100644
--- a/README.md
+++ b/README.md
@@ -37,6 +37,7 @@ Basic:
 `master` branch:
 
 - [Element Plus](https://element-plus.org/): component library
+- [Pinia](https://pinia.vuejs.org/): state management
 - [Iconify](https://iconify.design/) icons with [unplugin-icons](https://github.com/antfu/unplugin-icons)
 
 `antd` branch:
@@ -79,8 +80,9 @@ Read the following must-read to understand the technology stack of this template
 
 - [Fes.js Docs](https://winixt.gitee.io/fesjs/zh/guide/)
 - [\<script setup> RFC](https://github.com/vuejs/rfcs/blob/script-setup-2/active-rfcs/0000-script-setup.md)
-- [Vue 3 Reactivity](https://v3.vuejs.org/guide/reactivity.html#what-is-reactivity)
-- [Vue 3 Composition API](https://v3.vuejs.org/guide/composition-api-introduction.html#reactive-variables-with-ref)
+- [What is Vue 3 Reactivity?](https://v3.vuejs.org/guide/reactivity.html#what-is-reactivity)
+- [Vue 3 Reactivity API](https://v3.vuejs.org/api/reactivity-api.html)
+- [Vue 3 Composition API](https://v3.vuejs.org/api/composition-api.html)
 - [Vue 3 TypeScript Support](https://v3.vuejs.org/guide/typescript-support.html#annotating-props)
 - [Using Vue 3 with JSX and TypeScript](https://bypaulshen.com/posts/vue-3-jsx-typescript)
 - [Vue Style Guide](https://v3.vuejs.org/style-guide/)
diff --git a/package-lock.json b/package-lock.json
index 6850bf4..4386590 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -32,6 +32,7 @@
         "eslint-webpack-plugin": "^3.1.1",
         "husky": "^7.0.4",
         "lint-staged": "^12.1.4",
+        "pinia": "^2.0.9",
         "postcss-html": "^1.3.0",
         "stylelint": "^14.2.0",
         "stylelint-config-property-sort-order-smacss": "^8.0.0",
@@ -11248,6 +11249,58 @@
         "node": ">=6"
       }
     },
+    "node_modules/pinia": {
+      "version": "2.0.9",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.0.9.tgz",
+      "integrity": "sha512-iuYdxLJKQ07YPyOHYH05wNG9eKWqkP/4y4GE8+RqEYtz5fwHgPA5kr6zQbg/DoEJGnR2XCm1w1vdt6ppzL9ATg==",
+      "dev": true,
+      "dependencies": {
+        "@vue/devtools-api": "^6.0.0-beta.21",
+        "vue-demi": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.4.0",
+        "typescript": ">=4.4.4",
+        "vue": "^2.6.14 || ^3.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/pinia/node_modules/vue-demi": {
+      "version": "0.12.1",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.12.1.tgz",
+      "integrity": "sha512-QL3ny+wX8c6Xm1/EZylbgzdoDolye+VpCXRhI2hug9dJTP3OUJ3lmiKN3CsVV3mOJKwFi0nsstbgob0vG7aoIw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/pinkie": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz",
@@ -24301,6 +24354,25 @@
       "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
       "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g=="
     },
+    "pinia": {
+      "version": "2.0.9",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.0.9.tgz",
+      "integrity": "sha512-iuYdxLJKQ07YPyOHYH05wNG9eKWqkP/4y4GE8+RqEYtz5fwHgPA5kr6zQbg/DoEJGnR2XCm1w1vdt6ppzL9ATg==",
+      "dev": true,
+      "requires": {
+        "@vue/devtools-api": "^6.0.0-beta.21",
+        "vue-demi": "*"
+      },
+      "dependencies": {
+        "vue-demi": {
+          "version": "0.12.1",
+          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.12.1.tgz",
+          "integrity": "sha512-QL3ny+wX8c6Xm1/EZylbgzdoDolye+VpCXRhI2hug9dJTP3OUJ3lmiKN3CsVV3mOJKwFi0nsstbgob0vG7aoIw==",
+          "dev": true,
+          "requires": {}
+        }
+      }
+    },
     "pinkie": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz",
diff --git a/package.json b/package.json
index ab1cb21..7bd7d00 100644
--- a/package.json
+++ b/package.json
@@ -55,6 +55,7 @@
     "eslint-webpack-plugin": "^3.1.1",
     "husky": "^7.0.4",
     "lint-staged": "^12.1.4",
+    "pinia": "^2.0.9",
     "postcss-html": "^1.3.0",
     "stylelint": "^14.2.0",
     "stylelint-config-property-sort-order-smacss": "^8.0.0",
diff --git a/src/app.ts b/src/app.ts
index deff1d3..ae4c200 100644
--- a/src/app.ts
+++ b/src/app.ts
@@ -1,7 +1,15 @@
 import { access } from '@fesjs/fes'
+import type { App } from 'vue'
+import { createPinia } from 'pinia'
+
 import PageLoading from '~/components/PageLoading.vue'
 import UserCenter from '~/components/UserCenter.vue'
 
+export function onAppCreated({ app }: { app: App }) {
+  const pinia = createPinia()
+  app.use(pinia)
+}
+
 export const beforeRender = {
   loading: PageLoading,
   action() {
@@ -9,21 +17,12 @@ export const beforeRender = {
     return new Promise((resolve) => {
       setTimeout(() => {
         void setRole('admin')
-        // 初始化应用的全局状态，可以通过 useModel('@@initialState') 获取，具体用法看@/components/UserCenter 文件
-        resolve(state)
+        resolve({})
       }, 1000)
     })
   },
 }
 
-export type State = {
-  userName: string
-}
-
-const state: State = {
-  userName: 'harrywan',
-}
-
 export const layout = {
   customHeader: UserCenter,
 }
diff --git a/src/components/UserCenter.vue b/src/components/UserCenter.vue
index f740dbe..c845229 100644
--- a/src/components/UserCenter.vue
+++ b/src/components/UserCenter.vue
@@ -3,15 +3,15 @@
     <i-mdi-account-box
       style="color: red; font-size: 2em; vertical-align: middle"
     />
-    <span>{{ initialState.userName }}</span>
+    <span>{{ name }}</span>
   </div>
 </template>
 
 <script setup lang="ts">
-import { useModel } from '@fesjs/fes'
-import type { State } from '~/app'
+import useUserStore from '~/stores/user'
 
-const initialState = useModel('@@initialState') as State
+const store = useUserStore()
+const name = store.name
 </script>
 
 <style scope lang="scss">
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 0e06814..fa0b493 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -22,11 +22,13 @@
 
 <script setup lang="ts">
 import { enums } from '@fesjs/fes'
+import useCounterStore from '~/stores/counter'
 
-const count = ref(0)
+const store = useCounterStore()
+const count = computed(() => store.clicked)
 
 const increment = () => {
-  count.value++
+  store.clicked++
 }
 
 const enumsGet = enums.get
diff --git a/src/stores/counter.ts b/src/stores/counter.ts
new file mode 100644
index 0000000..7c4a81f
--- /dev/null
+++ b/src/stores/counter.ts
@@ -0,0 +1,21 @@
+import { defineStore, acceptHMRUpdate } from 'pinia'
+
+const useCounterStore = defineStore('counter', {
+  state: () => {
+    return {
+      clicked: 4,
+    }
+  },
+})
+
+// Enable HMR for supported bundlers
+// See: https://pinia.vuejs.org/cookbook/hot-module-replacement.html
+/* eslint-disable */
+// @ts-ignore
+if (import.meta.hot) {
+  // @ts-ignore
+  import.meta.hot.accept(acceptHMRUpdate(useCounterStore, import.meta.hot))
+}
+/* eslint-enable */
+
+export default useCounterStore
diff --git a/src/stores/user.ts b/src/stores/user.ts
new file mode 100644
index 0000000..f82327a
--- /dev/null
+++ b/src/stores/user.ts
@@ -0,0 +1,21 @@
+import { defineStore, acceptHMRUpdate } from 'pinia'
+
+const useUserStore = defineStore('user', {
+  state: () => {
+    return {
+      name: 'harrywan',
+    }
+  },
+})
+
+// Enable HMR for supported bundlers
+// See: https://pinia.vuejs.org/cookbook/hot-module-replacement.html
+/* eslint-disable */
+// @ts-ignore
+if (import.meta.hot) {
+  // @ts-ignore
+  import.meta.hot.accept(acceptHMRUpdate(useUserStore, import.meta.hot))
+}
+/* eslint-enable */
+
+export default useUserStore
diff --git a/src/types/auto-imports.d.ts b/src/types/auto-imports.d.ts
index 9d6d865..67a4afc 100644
--- a/src/types/auto-imports.d.ts
+++ b/src/types/auto-imports.d.ts
@@ -9,7 +9,6 @@ declare global {
   const effectScope: typeof import('vue')['effectScope']
   const EffectScope: typeof import('vue')['EffectScope']
   const ElButton: typeof import('element-plus/es')['ElButton']
-  const ElLoadingDirective: typeof import('element-plus/es')['ElLoadingDirective']
   const getCurrentInstance: typeof import('vue')['getCurrentInstance']
   const getCurrentScope: typeof import('vue')['getCurrentScope']
   const h: typeof import('vue')['h']
diff --git a/src/types/components.d.ts b/src/types/components.d.ts
index c075ebf..002e255 100644
--- a/src/types/components.d.ts
+++ b/src/types/components.d.ts
@@ -6,7 +6,6 @@ declare module 'vue' {
   export interface GlobalComponents {
     ElButton: typeof import('element-plus/es')['ElButton']
     IMdiAccountBox: typeof import('~icons/mdi/account-box')['default']
-    Loading: typeof import('element-plus/es')['ElLoadingDirective']
     PageLoading: typeof import('./../components/PageLoading.vue')['default']
     UserCenter: typeof import('./../components/UserCenter.vue')['default']
   }
diff --git a/tsconfig.json b/tsconfig.json
index b156b19..4e1ada0 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -7,7 +7,7 @@
       "~/*": ["src/*"],
       "@@/*": ["src/.fes/*"]
     },
-    "types": ["element-plus/global", "unplugin-icons/types/vue"]
+    "types": ["node", "jest", "element-plus/global", "unplugin-icons/types/vue"]
   },
   "include": [
     "src/**/*",