From 5c9a2fd8de450c204a1adf727ecbeda57429efb1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=84=E7=8E=89=E6=9D=AD?= <2150097635@example.com>
Date: Sun, 19 May 2024 21:07:52 +0800
Subject: [PATCH] ,

---
 .../20240513-pinia.md"                        | 76 +++++++++++++++++++
 .../20240516\350\267\257\347\224\261.md"      | 73 ++++++++++++++++++
 2 files changed, 149 insertions(+)
 create mode 100644 "\351\273\204\347\216\211\346\235\255/20240513-pinia.md"
 create mode 100644 "\351\273\204\347\216\211\346\235\255/20240516\350\267\257\347\224\261.md"

diff --git "a/\351\273\204\347\216\211\346\235\255/20240513-pinia.md" "b/\351\273\204\347\216\211\346\235\255/20240513-pinia.md"
new file mode 100644
index 0000000..cb4becc
--- /dev/null
+++ "b/\351\273\204\347\216\211\346\235\255/20240513-pinia.md"
@@ -0,0 +1,76 @@
+Pinia是一个基于Vue 3的状态管理库，它提供了一种简单、直观的方式来管理应用程序的状态。Pinia的设计受到了Vuex的启发，但它更加轻量、易于使用，并且与Vue 3的响应式系统紧密集成。
+
+使用Pinia，您可以定义和管理应用程序的状态，并在组件中轻松地访问和更新这些状态。
+1. 安装Pinia：
+
+```bash
+npm install pinia
+```
+
+2. 创建和配置Pinia实例：
+
+```javascript
+// main.js
+
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import App from './App.vue'
+
+const app = createApp(App)
+const pinia = createPinia()
+
+app.use(pinia)
+app.mount('#app')
+```
+
+3. 定义状态和操作：
+
+```javascript
+// store.js
+
+import { defineStore } from 'pinia'
+
+export const useCounterStore = defineStore('counter', {
+  state: () => ({
+    count: 0
+  }),
+  actions: {
+    increment() {
+      this.count++
+    },
+    decrement() {
+      this.count--
+    }
+  }
+})
+```
+
+4. 在组件中使用状态和操作：
+
+```vue
+<template>
+  <div>
+    <p>Count: {{ count }}</p>
+    <button @click="increment">Increment</button>
+    <button @click="decrement">Decrement</button>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+import { useCounterStore } from './store'
+
+export default defineComponent({
+  setup() {
+    const counterStore = useCounterStore()
+
+    return {
+      count: counterStore.count,
+      increment: counterStore.increment,
+      decrement: counterStore.decrement
+    }
+  }
+})
+</script>
+```
+
diff --git "a/\351\273\204\347\216\211\346\235\255/20240516\350\267\257\347\224\261.md" "b/\351\273\204\347\216\211\346\235\255/20240516\350\267\257\347\224\261.md"
new file mode 100644
index 0000000..4c80b42
--- /dev/null
+++ "b/\351\273\204\347\216\211\346\235\255/20240516\350\267\257\347\224\261.md"
@@ -0,0 +1,73 @@
+路由是指确定应用程序中不同页面之间导航的机制。在Web开发中，路由通常用于根据URL的路径来加载不同的页面或组件。
+
+1. 安装Vue Router：
+
+```bash
+npm install vue-router
+```
+
+2. 创建和配置Vue Router实例：
+
+```javascript
+// main.js
+
+import { createApp } from 'vue'
+import { createRouter, createWebHistory } from 'vue-router'
+import App from './App.vue'
+import Home from './components/Home.vue'
+import About from './components/About.vue'
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [
+    { path: '/', component: Home },
+    { path: '/about', component: About }
+  ]
+})
+
+const app = createApp(App)
+app.use(router)
+app.mount('#app')
+```
+
+
+1. 创建路由组件：
+
+```vue
+<!-- Home.vue -->
+
+<template>
+  <div>
+    <h1>Home Page</h1>
+    <!-- 页面内容 -->
+  </div>
+</template>
+
+<!-- About.vue -->
+
+<template>
+  <div>
+    <h1>About Page</h1>
+    <!-- 页面内容 -->
+  </div>
+</template>
+```
+
+
+
+1. 在模板中使用路由：
+
+```vue
+<!-- App.vue -->
+
+<template>
+  <div>
+    <nav>
+      <router-link to="/">Home</router-link>
+      <router-link to="/about">About</router-link>
+    </nav>
+    <router-view></router-view>
+  </div>
+</template>
+```
+
-- 
Gitee