From 1c3121354e9b27169a1da4ea7b98f90f569d3e7c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=84=E5=A4=A9=E4=BC=9F?= <1571831274@qq.com>
Date: Sun, 19 May 2024 21:23:02 +0800
Subject: [PATCH] =?UTF-8?q?20240513-=E7=AC=94=E8=AE=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../20240513-paina.md"                        | 67 +++++++++++++++++++
 1 file changed, 67 insertions(+)
 create mode 100644 "\351\273\204\345\244\251\344\274\237/20240513-paina.md"

diff --git "a/\351\273\204\345\244\251\344\274\237/20240513-paina.md" "b/\351\273\204\345\244\251\344\274\237/20240513-paina.md"
new file mode 100644
index 0000000..e02f353
--- /dev/null
+++ "b/\351\273\204\345\244\251\344\274\237/20240513-paina.md"
@@ -0,0 +1,67 @@
+**Pinia 是一个基于 Vue 3 的状态管理库，它提供了类似 Vuex 的状态管理功能，但使用了更现代化的 API 和更好的 TypeScript 支持。**
+
+#### 安装 Pinia
+```bash
+npm install pinia
+```
+
+#### 创建 Pinia Store
+
+```vue
+<script setup>
+import { defineStore } from 'pinia';
+
+export const useCounterStore = defineStore({
+  id: 'counter',
+  state: () => ({
+    count: 0,
+  }),
+  actions: {
+    increment() {
+      this.count++;
+    },
+    decrement() {
+      this.count--;
+    },
+  },
+  getters: {
+    doubledCount() {
+      return this.count * 2;
+    },
+  },
+});
+</script>
+```
+
+#### 在组件中使用 Pinia Store
+```vue
+<template>
+  <div>
+    <p>Count: {{ store.count }}</p>
+    <button @click="store.increment()">Increment</button>
+    <button @click="store.decrement()">Decrement</button>
+    <p>Doubled Count: {{ store.doubledCount }}</p>
+  </div>
+</template>
+
+<script setup>
+import { useStore } from 'pinia';
+import { useCounterStore } from './stores/counter';
+
+const store = useCounterStore();
+</script>
+```
+
+在这个示例中，定义了一个名为 `useCounterStore` 的 Pinia Store，并在组件中使用 `useCounterStore` 来获取该 Store 的实例，然后通过 `store` 对象访问状态、操作和 getters。
+
+#### 使用插件
+
+```javascript
+import { createApp } from 'vue';
+import { createPinia } from 'pinia';
+import App from './App.vue';
+
+const app = createApp(App);
+app.use(createPinia());
+app.mount('#app');
+```
\ No newline at end of file
-- 
Gitee