Merge pull request #115 from GuoXiCheng/dev-c

update docs

src/.vitepress/sidebars/vue.yaml

@@ -173,4 +173,30 @@
               - text: .number
                 link: /frontend/vue/form/modifiers#number
               - text: .trim
-                link: /frontend/vue/form/modifiers#trim
+                link: /frontend/vue/form/modifiers#trim
+      - text: 状态管理
+        collapsed: true
+        items:
+          - text: Vuex
+            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 核心概念

src/frontend/vue/state-management/vuex/basics.md

@@ -0,0 +1,35 @@
+# Vuex 基础
+
+## 安装 Vuex
+
+```bash
+npm install vuex@next --save
+```
+
+## 最简单的 Store
+
+每一个 Vuex 应用的核心是 store（仓库），store 包含着应用中大部分的状态（state）。
+
+::: code-group
+<<< @/../projects/vue-sandbox/src/stores/vuex-store.ts [创建一个 Store]
+
+```js [注册到Vue应用中]
+import { createApp } from "vue";
+import App from "./App.vue";
+import { vuexStore } from "./stores/vuex-store";
+
+const app = createApp(App);
+
+app.mount("#app");
+
+app.use(vuexStore);
+```
+
+<<< @/../projects/vue-sandbox/src/components/StateManagement/BasicStore.vue [使用 Store]
+:::
+
+## Vuex 和单纯的全局对象的两点区别
+
+1. Vuex 的状态是响应式存储的。
+
+2. 不能直接改变 store 中的状态，只能通过提交 mutation 来改变状态。

src/frontend/vue/state-management/vuex/introduction.md

@@ -0,0 +1,38 @@
+# Vuex 介绍
+
+## 什么是 Vuex
+
+Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
+
+它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
+
+## 什么是状态管理模式
+
+状态管理模式是一种管理状态的模式，它将状态抽取到一个全局的对象中进行管理，然后通过一些规则保证状态以一种可预测的方式发生变化。
+
+一个状态管理模式包含以下几个部分：
+
+- 状态（State）：存储应用程序的状态。
+- 视图（View）：以声明的方式将状态映射到视图。
+- 动作（Action）：响应视图上的用户输入导致的状态变化。
+
+## 单向数据流
+
+单向数据流是一种数据流动的模式，数据只能从一个方向流向另一个方向，不能反向流动。
+
+在 Vuex 中，数据的流动是单向的，即数据只能从状态（State）流向视图（View），从视图（View）流向动作（Action），不能反向流动。
+
+## 多组件共享状态
+
+当多组件共享状态时，单向数据流的简洁性很容易被破坏。
+
+::: details
+
+- 多个视图依赖于同一状态: 传参对于多层嵌套组件十分繁琐，并且对于兄弟组件需要通过父组件。
+- 多个视图的不同行为变更同一状态：通过父子组件的直接引用或通过事件来变更和同步状态。
+
+以上的模式十分脆弱，通常会导致无法维护的代码。
+
+:::
+
+Vuex 通过集中式存储管理应用的所有组件的状态，以及相应的规则保证状态以一种可预测的方式发生变化，来解决多组件共享状态的问题。

src/reference.md

@@ -7,3 +7,4 @@
 - [React Documentation](https://react.dev)
 - [MDN Web Docs](https://developer.mozilla.org/en-US/)
 - [Vue.js](https://cn.vuejs.org/)
+- [Vuex](https://vuex.vuejs.org/zh/)