diff --git "a/\344\275\231\350\276\211/20240513.md" "b/\344\275\231\350\276\211/20240513.md"
new file mode 100644
index 0000000000000000000000000000000000000000..bc44bcece5f1fce03dd274533121846ddeb1ac30
--- /dev/null
+++ "b/\344\275\231\350\276\211/20240513.md"
@@ -0,0 +1,97 @@
+### 五、Action的使用
+
+### 1. 什么是Action
+
+在Pinia中，Action相当于store中的方法，用于处理业务逻辑、异步操作等。通过Action，可以改变状态（State）并触发状态的更新。
+
+### 2. Action的定义
+
+在定义store时，可以在`actions`选项中定义各种Action。
+
+```javascript
+export const useCountStore = defineStore('count', {
+  state: () => ({
+    count: 0
+  }),
+  actions: {
+    increment() {
+      this.count++
+    },
+    async fetchData() {
+      const response = await fetch('https://api.example.com/data')
+      const data = await response.json()
+      // 处理获取的数据
+    }
+  }
+})
+```
+
+### 3. 在组件中使用Action
+
+在组件中可以通过store实例来调用定义好的Action。
+
+```html
+<template>
+  <div>
+    <p>Count: {{ counter.count }}</p>
+    <button @click="counter.increment()">Increment</button>
+    <button @click="fetchData">Fetch Data</button>
+  </div>
+</template>
+
+<script setup>
+import { useCountStore } from './stores/counter';
+
+const counter = useCountStore();
+
+const fetchData = async () => {
+  await counter.fetchData();
+}
+</script>
+```
+
+### 4. 异步Action
+
+Action可以是异步的，可以在Action中执行异步操作如HTTP请求、定时器等。在Action中使用`async`关键字可以定义异步函数。
+
+```javascript
+actions: {
+  async fetchData() {
+    const response = await fetch('https://api.example.com/data')
+    const data = await response.json()
+    // 处理获取的数据
+  }
+}
+```
+
+### 5. 在Action中访问其他Action和Getter
+
+在Action中可以通过`this`访问同一个store中的其他Action和Getter。
+
+```javascript
+actions: {
+  incrementAndDouble() {
+    this.increment() // 调用同一个store中的另一个Action
+    const doubleCount = this.doubleCount // 访问Getter
+    console.log(doubleCount)
+  }
+}
+```
+
+### 6. 异步Action的错误处理
+
+在异步Action中，可以使用`try...catch`来捕获错误并进行处理。
+
+```javascript
+actions: {
+  async fetchData() {
+    try {
+      const response = await fetch('https://api.example.com/data')
+      const data = await response.json()
+      // 处理获取的数据
+    } catch (error) {
+      console.error('Error fetching data:', error)
+    }
+  }
+}
+```
\ No newline at end of file
diff --git "a/\344\275\231\350\276\211/20240516.md" "b/\344\275\231\350\276\211/20240516.md"
new file mode 100644
index 0000000000000000000000000000000000000000..1f73e376405f53353dc2d5e496b030cb34d4f060
--- /dev/null
+++ "b/\344\275\231\350\276\211/20240516.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>
+```