From e3cf0781a79176a281ab0bca45a807fdb3ffaa77 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=94=90=E5=A4=A9=E5=A8=A5?= <3517601051@qq,com>
Date: Sun, 19 May 2024 12:43:22 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../20240513-pinia.md"                        | 80 +++++++++++++++++++
 1 file changed, 80 insertions(+)
 create mode 100644 "\345\224\220\345\244\251\345\250\245/20240513-pinia.md"

diff --git "a/\345\224\220\345\244\251\345\250\245/20240513-pinia.md" "b/\345\224\220\345\244\251\345\250\245/20240513-pinia.md"
new file mode 100644
index 0000000..3608302
--- /dev/null
+++ "b/\345\224\220\345\244\251\345\250\245/20240513-pinia.md"
@@ -0,0 +1,80 @@
+## pinia
+下面就是 pinia API 的基本用法 (为继续阅读本简介请确保你已阅读过了开始章节)。你可以先创建一个 Store：
+
+js
+// stores/counter.js
+import { defineStore } from 'pinia'
+
+export const useCounterStore = defineStore('counter', {
+  state: () => {
+    return { count: 0 }
+  },
+  // 也可以这样定义
+  // state: () => ({ count: 0 })
+  actions: {
+    increment() {
+      this.count++
+    },
+  },
+})
+
+然后你就可以在一个组件中使用该 store 了：
+
+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>
+更真实的示例
+这是一个更完整的 Pinia API 示例，在 JavaScript 中也使用了类型提示。对于某些开发者来说，可能足以在不进一步阅读的情况下直接开始阅读本节内容，但我们仍然建议你先继续阅读文档的其余部分，甚至跳过此示例，在阅读完所有核心概念之后再回来。
+
+js
+import { defineStore } from 'pinia'
+
+export const useTodos = defineStore('todos', {
+  state: () => ({
+    /** @type {{ text: string, id: number, isFinished: boolean }[]} */
+    todos: [],
+    /** @type {'all' | 'finished' | 'unfinished'} */
+    filter: 'all',
+    // 类型将自动推断为 number
+    nextId: 0,
+  }),
+  getters: {
+    finishedTodos(state) {
+      // 自动补全！ ✨
+      return state.todos.filter((todo) => todo.isFinished)
+    },
+    unfinishedTodos(state) {
+      return state.todos.filter((todo) => !todo.isFinished)
+    },
+    /**
+     * @returns {{ text: string, id: number, isFinished: boolean }[]}
+     */
+    filteredTodos(state) {
+      if (this.filter === 'finished') {
+        // 调用其他带有自动补全的 getters ✨
+        return this.finishedTodos
+      } else if (this.filter === 'unfinished') {
+        return this.unfinishedTodos
+      }
+      return this.todos
+    },
+  },
+  actions: {
+    // 接受任何数量的参数，返回一个 Promise 或不返回
+    addTodo(text) {
+      // 你可以直接变更该状态
+      this.todos.push({ text, id: this.nextId++, isFinished: false })
+    },
+  },
+})
\ No newline at end of file
-- 
Gitee


From b27958a1a115925c4aa18e5b30e3b10e37c96d27 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=94=90=E5=A4=A9=E5=A8=A5?= <3517601051@qq,com>
Date: Sun, 19 May 2024 21:22:55 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../20240516-\345\244\215\344\271\240.md"     | 146 ++++++++++++++++++
 1 file changed, 146 insertions(+)
 create mode 100644 "\345\224\220\345\244\251\345\250\245/20240516-\345\244\215\344\271\240.md"

diff --git "a/\345\224\220\345\244\251\345\250\245/20240516-\345\244\215\344\271\240.md" "b/\345\224\220\345\244\251\345\250\245/20240516-\345\244\215\344\271\240.md"
new file mode 100644
index 0000000..8ab6db9
--- /dev/null
+++ "b/\345\224\220\345\244\251\345\250\245/20240516-\345\244\215\344\271\240.md"
@@ -0,0 +1,146 @@
+## 复习代码
+```js
+<script setup>
+import { ref, onMounted } from 'vue'
+import axios from 'axios'
+const blogs = ref([]);
+const BlogData = ref('');
+const showModal = ref(false)
+const blogInfo = ref({})
+
+onMounted(() => {
+  getData()
+})
+
+async function getData() {
+  let res = await axios.get("http://localhost:3000/blog")
+  blogs.value = res.data.data;
+}
+
+async function btnQuery(){
+  let res = await axios.get(
+    "http://localhost:3000/blog?keyword="+BlogData.value
+  )
+  blogs.value=res.data.data;
+}
+
+async function btnDel(id){
+  console.log(id);
+  if(confirm(`你确定要删除id为：${id}的数据吗？`)){
+    let res = await axios.delete("http://localhost:3000/blog/"+id)
+    location.reload()
+  }
+}
+
+function btnAdd(){
+  showModal.value = !showModal.value
+}
+function btnCancel(){
+  showModal.value = !showModal.value
+}
+async function btnEdit(id){
+  showModal.value = !showModal.value
+  console.log(id);
+  let res = await axios.get("http://localhost:3000/blog/"+id)
+  blogInfo.value = res.data.data
+}
+
+async function btnSave(){
+  console.log(blogInfo.value.id)
+  if(blogInfo.value.id){
+    let res = await axios.put('http://localhost:3000/blog/'+blogInfo.value.id,blogInfo.value)
+    console.log(res)
+    if(res.data.code==3000){
+    getData()
+    showModal.value = !showModal.value
+  }
+  }else{
+    let res = await axios.post('http://localhost:3000/blog',blogInfo.value)
+    console.log(res)
+    if(res.data.code==3000){
+    getData()
+    showModal.value = !showModal.value
+  }
+  }
+}
+</script>
+
+<template>
+  <div id="top">
+    <input type="text" v-model="BlogData">
+    <input type="button" value="查询" @click="btnQuery">
+    <input type="button" value="新增" @click="btnAdd; showModal = true">
+  </div>
+  <div id="bottom">
+    <table id="tb">
+      <tr>
+        <th>编号</th>
+        <th>标题</th>
+        <th>作者</th>
+        <th>操作</th>
+      </tr>
+      <tr v-for="item in blogs" :key="item.id">
+        <td>{{ item.id }}</td>
+        <td>{{ item.blogName }}</td>
+        <td>{{ item.blogAuthor }}</td>
+        <td>
+          <input type="button" value="编辑" @click="btnEdit(item.id)">
+          <input type="button" value="删除" @click="btnDel(item.id)">
+        </td>
+      </tr>
+    </table>
+  </div>
+  <div id="modal" v-if="showModal">
+    <div class="modal-top">
+      <table>
+        <tr>
+          <td>标题：</td>
+          <td><input type="text" v-model="blogInfo.blogName"></td>
+        </tr>
+        <tr>
+          <td>作者：</td>
+          <td><input type="text" v-model="blogInfo.blogAuthor"></td>
+        </tr>
+        <tr>
+          <td><button @click="btnCancel">取消</button></td>
+          <td><button @click="btnSave">保存</button></td>
+        </tr>
+      </table>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+* {
+  padding: 0px;
+  margin: 0px;
+}
+#bottom #tb,
+table,
+tr,
+td,
+th {
+  border: 1px solid;
+  /* border-spacing: 0px; */
+  border-collapse: collapse;
+}
+
+#modal {
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5)
+}
+
+#modal .modal-top {
+  background-color: #fff;
+  width: 250px;
+  height: 250px;
+  margin: 200px auto;
+  padding: 20px;
+  border-radius: 20px;
+}
+</style>
+```
\ No newline at end of file
-- 
Gitee