Merge pull request #116 from GuoXiCheng/dev-c

update docs

src/.vitepress/sidebars/vue.yaml

@@ -116,6 +116,7 @@
               - text: 比较 watch 和 watcheffect
                 link: /frontend/vue/watch/watch-effect#比较-watch-和-watcheffect
       - text: 事件监听
+        collapsed: true
         items:
           - text: 事件处理器
             link: /frontend/vue/event-handling/handler
@@ -174,29 +175,20 @@
                 link: /frontend/vue/form/modifiers#number
               - text: .trim
                 link: /frontend/vue/form/modifiers#trim
-      - text: 状态管理
+      - text: Pinia
         collapsed: true
         items:
-          - text: Vuex
+          - text: Pinia 介绍
+            link: /frontend/vue/pinia/introduction
             items:
-              - text: Vuex 介绍
-                link: /frontend/vue/state-management/vuex/introduction
-                items:
-                  - text: 什么是 Vuex
-                    link: /frontend/vue/state-management/vuex/introduction#什么是-vuex
-                  - text: 什么是状态管理模式
-                    link: /frontend/vue/state-management/vuex/introduction#什么是状态管理模式
-                  - text: 单向数据流
-                    link: /frontend/vue/state-management/vuex/introduction#单向数据流
-                  - text: 多组件共享状态
-                    link: /frontend/vue/state-management/vuex/introduction#多组件共享状态
-              - text: Vuex 基础
-                link: /frontend/vue/state-management/vuex/basics
-                items:
-                  - text: 安装 Vuex
-                    link: /frontend/vue/state-management/vuex/basics#安装-vuex
-                  - text: 最简单的 Store
-                    link: /frontend/vue/state-management/vuex/basics#最简单的-store
-                  - text: Vuex 和单纯的全局对象的两点区别
-                    link: /frontend/vue/state-management/vuex/basics#vuex-和单纯的全局对象的两点区别
-              - text: Vuex 核心概念
+              - text: 什么是 pinia
+                link: /frontend/vue/pinia/introduction#什么是-pinia
+              - text: 完整的 Pinia API 示例
+                link: /frontend/vue/pinia/introduction#完整的-pinia-api-示例
+          - text: 开始使用 Pinia
+            link: /frontend/vue/pinia/getting-started
+            items:
+              - text: 安装 Pinia
+                link: /frontend/vue/pinia/getting-started#安装-pinia
+              - text: 创建 Pinia 实例
+                link: /frontend/vue/pinia/getting-started#创建-pinia-实例

src/frontend/vue/pinia/getting-started.md

@@ -0,0 +1,41 @@
+# 开始使用
+
+## 安装 pinia
+
+```bash
+npm install pinia
+```
+
+## 创建 pinia 实例
+
+::: code-group
+
+```js [Vue 3]
+import { createApp } from "vue";
+import { createPinia } from "pinia";
+import App from "./App.vue";
+
+const pinia = createPinia();
+const app = createApp(App);
+
+app.use(pinia);
+app.mount("#app");
+```
+
+```js [Vue 2]
+import { createPinia, PiniaVuePlugin } from "pinia";
+
+Vue.use(PiniaVuePlugin);
+const pinia = createPinia();
+
+new Vue({
+  el: "#app",
+  // 其他配置...
+  // ...
+  // 请注意，同一个`pinia'实例
+  // 可以在同一个页面的多个 Vue 应用中使用。
+  pinia,
+});
+```
+
+:::

src/frontend/vue/pinia/introduction.md

@@ -0,0 +1,50 @@
+# pinia 介绍
+
+## 什么是 pinia
+
+Pinia 是一个拥有组合式 API 的 Vue 状态管理库。
+
+## 完整的 Pinia API 示例
+
+```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 });
+    },
+  },
+});
+```