diff --git "a/\346\231\217\345\244\251\346\236\227/\347\254\224\350\256\260/20240513-piniaAPI.md" "b/\346\231\217\345\244\251\346\236\227/\347\254\224\350\256\260/20240513-piniaAPI.md"
new file mode 100644
index 0000000000000000000000000000000000000000..46a8f112b58c3d4f9ba90564697d8428dea3431a
--- /dev/null
+++ "b/\346\231\217\345\244\251\346\236\227/\347\254\224\350\256\260/20240513-piniaAPI.md"
@@ -0,0 +1,202 @@
+### 一、什么是状态管理
+- 对于大项目来说，组件多，状态零散分布在许多组件和组件之间的交互操作中，这时候就需要状态管理，理论上来说，每一个 Vue 组件实例都已经在“管理”它自己的响应式状态了
+- 示例如下：
+
+```html
+<!-- 计数器 -->
+<script setup>
+import { ref } from 'vue'
+
+// 状态
+const count = ref(0)
+
+// 动作
+function add() {
+  count.value++
+}
+</script>
+
+<!-- 视图 -->
+<template>{{ count }}</template>
+```
+
+- 上面代码中，当add方法不断被调用时，count的值就会不断增加显示在页面上，这样叫做“状态自管理”，由以下几个部分组成：
+  - 状态(state)：驱动整个应用的数据源
+  - 视图(view)：对状态的一种声明式映射
+  - 交互(actions)：状态根据用户在视图中的输入而作出相应变更的可能方式 
+
+  但是以上只是一个单向数据流，即从view上出发action改变state，state的改变最终回到view上，然而，当我们有多个组件共享一个共同的状态时，就会出现以下问题：
+     - 多个组件依赖于同一状态
+     - 来自不同视图的交互也可能需要更改同一份状态
+
+### 二、使用Pinia实现状态管理
+#### 1.安装
+
+```js
+npm install pinia
+```
+
+#### 2.创建pinia实例
+
+```js
+// main.js
+import {createPinia} from 'pinia';
+let app = createApp(App);
+const pinia = createPinia();
+app.use(pinia);
+```
+
+#### 3.pinia的基本用法
+##### 1.创建store实例
+
+```js
+// stores/counter.js
+import { defineStore } from 'pinia';
+
+// Option对象写法
+export const useCountStore = defineStore('count',{
+  state:()=>{
+    return {count:0}
+  },
+  // 也可以写为
+  // state: () => ({ count: 0 })，这里用大括号是为了让他以对象的形式返回出来
+  actions:{
+    onClick(){
+      this.count++
+    }
+  }
+})
+
+// Setup函数写法
+export const useCountStore = defineStore('count',()=>{
+    let count = ref(0);
+    function onClick(){
+        count.value++;
+    };
+    return{count,onClick}
+})
+```
+
+store的参数：
+ - 第一个参数要求不可重复
+ - 第二个参数可以接受两种类型的值：Setup函数或Option对象
+    - Setup：
+      - ref() 就是 state 属性，computed() 就是 getters，computed() 就是 getters
+      - 在 setup store 中返回 state 的所有属性
+    - Option：state 是 store 的数据 (data)，getters 是 store 的计算属性 (computed)，而 actions 则是方法 (methods)
+##### 2.在组件中使用store
+
+```html
+<template>
+  <div>
+    count: {{ counter.count }}
+    <button @click="counter.onClick()">点击+1</button>
+  </div>
+</template>
+<script setup>
+import { useCountStore } from './stores/counter';
+// 可以在组件中的任意位置访问 `store` 变量
+const counter = useCountStore();
+// 可以直接使用counter.count访问
+</script>
+```
+
+从store解构
+为了从 store 中提取属性时保持其响应性，需要使用 storeToRefs()，但是可以直接从 store 中解构 action
+
+```js
+import {storeToRefs} from 'pinia';
+const counter = useCountStore();
+// 并且会跳过所有的 action 或非响应式 (不是 ref 或 reactive) 的属性
+const {count} = storeToRefs(counter);
+// 作为 action 的 onClick 可以直接解构
+const {onClick} = counter
+```
+
+### 三、State
+#### 1.概念
+state是 store 的核心,被定义为一个返回初始状态的函数
+#### 2.访问
+
+```js
+const counter = useCountStore();
+// 访问的是state的初始状态
+// 也可以直接对其读写
+const data = counter.count;
+```
+#### 3.重置
+通过调用 store 的 $reset() 方法将 state 重置为初始值
+
+```js
+// counter.js
+export const useCountStore = defineStore('count',()=>{
+    let count = ref(0);
+    function onClick(){
+        count.value++;
+    };
+    // 创建自己的 $reset() 方法
+    function $reset(){
+        count.value=0;
+    }
+    return{count,onClick,$reset}
+})
+```
+
+```html
+<!-- app.vue -->
+<template>
+  <div>
+    count: {{ counter.count }}
+    <button @click="counter.onClick">点击+1</button>
+    <button @click="reset">重置</button>
+  </div>
+</template>
+
+<script setup>
+import { useCountStore } from './stores/counter';
+const counter = useCountStore();
+const reset = ()=>{
+  counter.$reset();
+}
+</script>
+```
+#### 4.变更
+用 store.count++ 直接改变 store，还可以调用 $patch 方法
+#### 5.替换
+不能完全替换掉 store 的 state，因为那样会破坏其响应性，还是使用patch
+
+### 四、Getter
+Getter 完全等同于 store 的 state 的计算属性
+
+```js
+export const useCountStore = defineStore('count',{
+  state:()=>{
+    return {count:1}
+  },
+  actions:{
+    onClick(){
+      this.count++
+    }
+  },
+  getters: {
+    doubleCount: (state) => state.count * 2,
+  },
+})
+```
+- 大多数时候，getter 仅依赖 state，不过，有时它们也可能会使用其他 getter,通过 this，你可以访问到其他任何 getter
+- getter 只是幕后的计算属性，所以不可以向它们传递任何参数。不过，你可以从 getter 返回一个函数，该函数可以接受任意参数
+
+```js
+export const useUsersStore = defineStore('users', {
+  getters: {
+    getUserById: (state) => {
+      // 可以返回函数,这个返回的函数可以接受容易参数
+      return (userId) => state.users.find((user) => user.id === userId)
+    },
+  },
+})
+  // 调用  
+```
+
+### 五、Action
+Action 相当于组件中的方法，也可通过 this 访问整个 store 实例，而且是可以异步的
\ No newline at end of file
diff --git "a/\346\231\217\345\244\251\346\236\227/\347\254\224\350\256\260/20240516-\345\244\215\344\271\240.md" "b/\346\231\217\345\244\251\346\236\227/\347\254\224\350\256\260/20240516-\345\244\215\344\271\240.md"
new file mode 100644
index 0000000000000000000000000000000000000000..8b20c7fe20708df57745cbc80c8ce3c25f6bd1d9
--- /dev/null
+++ "b/\346\231\217\345\244\251\346\236\227/\347\254\224\350\256\260/20240516-\345\244\215\344\271\240.md"
@@ -0,0 +1,101 @@
+### 通过路由方式实现增删改查
+
+#### 思路概述：
+通过Vue Router实现增删改查功能，通常需要配置路由来映射不同的页面和操作。在这个过程中，需要定义路由路径、组件以及处理路由跳转等逻辑。
+
+#### 具体步骤：
+
+### 1. 配置路由
+在Vue项目中配置路由，定义不同的路由路径和对应的组件。
+
+```javascript
+// src/router/router.js
+import { createRouter, createWebHistory } from 'vue-router';
+import Home from './components/Home.vue';
+import Edit from './components/Edit.vue';
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [
+    { path: '/home', component: Home },
+    { path: '/edit/:id?', name: 'Edit', component: Edit },
+    { path: '/', component: App },
+  ]
+});
+
+export default router;
+```
+
+### 2. 配置入口文件
+在入口文件中使用路由。
+
+```javascript
+// main.js
+import { createApp } from 'vue';
+import App from './App.vue';
+import router from './router/router';
+
+const app = createApp(App);
+app.use(router);
+app.mount('#app');
+```
+
+### 3. 创建视图组件
+在Vue项目中创建视图组件，如列表页面（Home.vue）和编辑页面（Edit.vue），用于展示数据和进行编辑操作。
+
+#### 列表页面（Home.vue）部分代码示例：
+```html
+<template>
+  <div>
+    <h1>Item List</h1>
+    <ul>
+      <li v-for="item in items" :key="item.id">
+        {{ item.name }}
+        <router-link :to="'/edit/' + item.id">Edit</router-link>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      items: [
+        { id: 1, name: 'Item 1' },
+        { id: 2, name: 'Item 2' },
+        { id: 3, name: 'Item 3' }
+      ]
+    };
+  }
+};
+</script>
+```
+
+#### 编辑页面（Edit.vue）部分代码示例：
+```html
+<template>
+  <div>
+    <h1>Edit Item</h1>
+    <input type="text" v-model="itemName" placeholder="Enter item name" />
+    <button @click="saveItem">Save</button>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      itemName: ''
+    };
+  },
+  methods: {
+    saveItem() {
+      // Save item logic
+      // Redirect back to item list after saving
+      this.$router.push('/home');
+    }
+  }
+};
+</script>
+```
\ No newline at end of file