diff --git "a/\346\235\250\345\217\257\347\233\210/20240513--pinia.md" "b/\346\235\250\345\217\257\347\233\210/20240513--pinia.md"
new file mode 100644
index 0000000000000000000000000000000000000000..01498fe1c3c14b6a599edb94cd58b1128e85c2bb
--- /dev/null
+++ "b/\346\235\250\345\217\257\347\233\210/20240513--pinia.md"
@@ -0,0 +1,53 @@
+### pinia
+```
+Pinia 是 Vue 的专属状态管理库，它允许你跨组件或页面共享状态。如果你熟悉组合式 API 的话，你可能会认为可以通过一行简单的 export const state = reactive({}) 来共享一个全局状态。对于单页应用来说确实可以，但如果应用在服务器端渲染，这可能会使你的应用暴露出一些安全漏洞。 而如果使用 Pinia，即使在小型单页应用中，你也可以获得如下功能：
+
+Devtools 支持
+追踪 actions、mutations 的时间线
+在组件中展示它们所用到的 Store
+让调试更容易的 Time travel
+热更新
+不必重载页面即可修改 Store
+开发时可保持当前的 State
+插件：可通过插件扩展 Pinia 功能
+为 JS 开发者提供适当的 TypeScript 支持以及自动补全功能。
+支持服务端渲染
+```
+
+```
+yarn add pinia
+```
+
+```js
+// stores/counter.js
+import { defineStore } from 'pinia'
+
+export const useCounterStore = defineStore('counter', {
+  state: () => {
+    return { count: 0 }
+  },
+  // 也可以这样定义
+  // state: () => ({ count: 0 })
+  actions: {
+    increment() {
+      this.count++
+    },
+  },
+})
+```
+
+```vue
+<script setup>
+import { useCounterStore } from '@/stores/counter'
+const counter = useCounterStore()
+counter.count++
+// 自动补全！ 
+counter.$patch({ count: counter.count + 1 })
+// 或使用 action 代替
+counter.increment()
+</script>
+<template>
+  <!-- 直接从 store 中访问 state -->
+  <div>Current Count: {{ counter.count }}</div>
+</template>
+```
\ No newline at end of file
diff --git "a/\346\235\250\345\217\257\347\233\210/20240516--\350\267\257\347\224\261\345\244\215\344\271\240.md" "b/\346\235\250\345\217\257\347\233\210/20240516--\350\267\257\347\224\261\345\244\215\344\271\240.md"
new file mode 100644
index 0000000000000000000000000000000000000000..5a63af70e15fbd2244baf4721c3363144226daef
--- /dev/null
+++ "b/\346\235\250\345\217\257\347\233\210/20240516--\350\267\257\347\224\261\345\244\215\344\271\240.md"
@@ -0,0 +1,134 @@
+```js
+import { onMounted, reactive,ref } from 'vue'
+    import {useRouter} from 'vue-router'
+    import axios from 'axios'
+
+    let blogs=reactive([
+
+    ])
+
+    let query=ref('')
+
+    let router=useRouter()
+    onMounted(async()=>{
+      let res=await axios.get(`http://localhost:3000/blogs`)
+      console.log(res);
+      res.data.data.forEach(item=>{
+        blogs.push(item)
+      })
+    })
+
+    function btnAdd(){
+      router.push('/editadd')
+    }
+
+    function btnEdit(id){
+      router.push(
+        {
+          path:`/editadd`,query:{id:id}
+        }
+      )
+    }
+    async function btnQuery(){
+      let res=await axios.get(`http://localhost:3000/blogs?keyword=${query.value}`)
+      blogs.splice(0)
+      console.log(query);
+      res.data.data.forEach(item=>{
+        blogs.push(item)
+      })
+    }
+    async function btnDel(id){
+      if(confirm(`你确定要删除id为${id}的数据吗`)){
+        let index=blogs.findIndex(item=>item.id===id)
+        blogs.splice(index,1)
+        let res=await axios.delete(`http://localhost:3000/blogs/${id}`)
+        console.log(res);
+      }
+    //     let res=await axios.delete(`http://localhost:3000/blogs/${id}`)
+    //     let idx
+    //     if(confirm(`确定删除id为${id}的数据吗`)){
+    //       if(res.data.code===1000){
+    //         blogs.filter((item,index)=>{
+    //           let result=item.id===id
+    //           if(result){
+    //             idx=index
+    //             return
+    //           }
+    //         })
+    //         blogs.splice(idx,1)
+    //       }
+    //     }
+    }
+</script>
+
+<template>
+  <div>
+    <input type="text" v-model="query">
+    <input type="button" value="添加" @click="btnAdd">
+    <input type="button" value="查找" @click="btnQuery">
+  </div>
+  <table class="tb">
+    <tr>
+      <th>id</th>
+      <th>title</th>
+      <th>author</th>
+      <th>flag</th>
+      <th>work</th>
+    </tr>
+    <tr v-for="(item,index) in blogs" :key="item.id">
+      <td>{{index+1}}</td>
+      <td>{{item.title}}</td>
+      <td>{{item.author}}</td>
+      <td>{{item.flag}}</td>
+      <td>
+        <input type="button" value="编辑" @click="btnEdit(item.id)">
+        <input type="button" value="删除" @click="btnDel(item.id)">
+      </td>
+    </tr>
+  </table>
+</template>
+```
+
+```js   
+import {useRouter,useRoute} from 'vue-router'
+import {reactive,onMounted} from 'vue'
+import axios from 'axios'
+
+let router=useRouter()
+let route=useRoute()
+let add=reactive({
+    title:"",
+    author:"",
+    flag:""
+})
+
+onMounted(async()=>{
+    let id=route.query.id
+    console.log(id);
+    if(id>0){
+        let edit=await axios.get(`http://localhost:3000/blogs/${id}`)
+        add.title=edit.data.data.title,
+        add.author=edit.data.data.author,
+        add.flag=edit.data.data.flag,
+        add.id=edit.data.data.id
+    }
+})
+
+async function btnSave(){
+    let obj={
+        title:add.title,
+        author:add.author,
+        flag:add.flag,
+    }
+    if(add.id>0){
+        await axios.put(`http://localhost:3000/blogs/${add.id}`,obj)
+    }else{
+        await axios.post(`http://localhost:3000/blogs`,obj)
+    }
+    router.push('/')
+}
+
+function btnCancel(){
+    router.push('/')
+}
+```
\ No newline at end of file
diff --git "a/\346\235\250\345\217\257\347\233\210/img/blog.gif" "b/\346\235\250\345\217\257\347\233\210/img/blog.gif"
index 782d6677723d1268cd1875d33c9149d00804d0ce..c7908d4cb7803a22df22e08469954a72dfd511c3 100644
Binary files "a/\346\235\250\345\217\257\347\233\210/img/blog.gif" and "b/\346\235\250\345\217\257\347\233\210/img/blog.gif" differ