From fcbb736f987d42563b01fd83ceb3dc1cac0b53cd Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Sun, 19 May 2024 20:28:56 +0800
Subject: [PATCH] =?UTF-8?q?=E7=AC=94=E8=AE=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../20240513-Pinia.md"                        | 96 +++++++++++++++++++
 .../20240514-20.API\345\222\214REST.md"       | 30 ++++++
 ...57\347\224\261\345\272\224\347\224\250.md" | 28 ++++++
 3 files changed, 154 insertions(+)
 create mode 100644 "\351\231\210\345\237\271\346\235\260/20240513-Pinia.md"
 create mode 100644 "\351\231\210\345\237\271\346\235\260/20240514-20.API\345\222\214REST.md"
 create mode 100644 "\351\231\210\345\237\271\346\235\260/20240516-\350\267\257\347\224\261\345\272\224\347\224\250.md"

diff --git "a/\351\231\210\345\237\271\346\235\260/20240513-Pinia.md" "b/\351\231\210\345\237\271\346\235\260/20240513-Pinia.md"
new file mode 100644
index 0000000..0b53573
--- /dev/null
+++ "b/\351\231\210\345\237\271\346\235\260/20240513-Pinia.md"
@@ -0,0 +1,96 @@
+```
+安装：pinia: yarn add pinia
+```
+
+#### 简介
+
+```
+通过 Mastering Pinia 的免费视频掌握更多内容
+Pinia 起始于 2019 年 11 月左右的一次实验，其目的是设计一个拥有组合式 API 的 Vue 状态管理库。从那时起，我们就倾向于同时支持 Vue 2 和 Vue 3，并且不强制要求开发者使用组合式 API，我们的初心至今没有改变。除了安装和 SSR 两章之外，其余章节中提到的 API 均支持 Vue 2 和 Vue 3。虽然本文档主要是面向 Vue 3 的用户，但在必要时会标注出 Vue 2 的内容，因此 Vue 2 和 Vue 3 的用户都可以阅读本文档。
+```
+
+#### 基础示例
+```
+下面就是 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
diff --git "a/\351\231\210\345\237\271\346\235\260/20240514-20.API\345\222\214REST.md" "b/\351\231\210\345\237\271\346\235\260/20240514-20.API\345\222\214REST.md"
new file mode 100644
index 0000000..fff961c
--- /dev/null
+++ "b/\351\231\210\345\237\271\346\235\260/20240514-20.API\345\222\214REST.md"
@@ -0,0 +1,30 @@
+## API和REST
+
+### API
+
+Application Programming Interface（应用程序接口）是它的全称。简单的理解就是，API是一个接口
+
+### REST
+
+HTTP总共包含八种方法：
+
+```
+GET
+POST
+PUT
+DELETE
+OPTIONS
+HEAD
+TRACE
+CONNECT
+```
+
+● 2xx = Success（成功）
+
+● 3xx = Redirect（重定向）
+
+● 4xx = User error（客户端错误）
+
+● 5xx = Server error（服务器端错误）
+
+我们常见的是200（请求成功）、404（未找到）、401（未授权）、500（服务器错误）...
\ No newline at end of file
diff --git "a/\351\231\210\345\237\271\346\235\260/20240516-\350\267\257\347\224\261\345\272\224\347\224\250.md" "b/\351\231\210\345\237\271\346\235\260/20240516-\350\267\257\347\224\261\345\272\224\347\224\250.md"
new file mode 100644
index 0000000..6189ab6
--- /dev/null
+++ "b/\351\231\210\345\237\271\346\235\260/20240516-\350\267\257\347\224\261\345\272\224\347\224\250.md"
@@ -0,0 +1,28 @@
+### 通过路由方式实现增删改查
+#### 思路：
+1. 配置路由：
+~~~js
+// src/router/router.js
+ import { createRouter, createWebHistory } from 'vue-router';
+ import Home from './components/Home.vue';
+ import ManageItem from './components/Edit.vue';
+ const router = createRouter({
+  history: createWebHistory(),
+  routes:[
+      {path:'/home',component:Home},
+      { path: '/edit/:id?', 
+        name: 'Edit', 
+        component: Edit,
+       },
+      {path:'/',component:App},
+      // 这里也可以加上redirect:'/home' 表示一打开就跳转到列表页，但是不推荐
+  ]
+ } );
+ export default router;
+~~~
+2. 配置入口文件：
+~~~js
+ import router from '.Router/router';
+ const app = createApp(App);
+ app.use(router);
+~~~
\ No newline at end of file
-- 
Gitee