diff --git a/src/App.vue b/src/App.vue
index 76c1ac0..d74c13c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,5 @@
- 
-
+
-
-
-
diff --git a/src/main.ts b/src/main.ts
index 01433bc..e766dee 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,4 +1,13 @@
import { createApp } from 'vue'
import App from './App.vue'
+import { createPinia } from "pinia";
-createApp(App).mount('#app')
+// 1. 实例化pinia
+const pinia = createPinia()
+
+const app = createApp(App)
+
+// 2. 挂载pinia
+app.use(pinia)
+
+app.mount('#app')
diff --git a/src/store/index.ts b/src/store/index.ts
new file mode 100644
index 0000000..c65f325
--- /dev/null
+++ b/src/store/index.ts
@@ -0,0 +1,28 @@
+// 1.定义容器
+import { defineStore } from "pinia";
+
+// 参数1： 容器id，必须唯一，将来pinia会把所有的容器挂载到根容器
+// 参数2： 选项对象
+export const userMainStore = defineStore('main', {
+
+ // 类似于data
+ // 必须是函数: 这样是为了服务端渲染的时候表面交叉请求导致的数据状态污染？？？
+ // 必须是箭头函数，为了更好的ts的类型推断
+ state: () => ( { count: 50, foo: 'ccc' } ),
+ getters: {
+ // 函数接受一个可选参数，state状态对象
+ count10( state ) {
+ return state.count+5
+ },
+ },
+ actions: {
+ // 不能使用箭头函数，this会绑定到外部去
+ changeState() {
+ this.count++;
+ this.foo += '='
+ }
+ }
+})
+// 2.使用容器中的state
+// 3.修改state
+// 4.容器中action的使用