From 07aa854fea62b47a52a7cbd10dba8a1de01e1452 Mon Sep 17 00:00:00 2001 From: zhaoss Date: Thu, 21 Apr 2022 10:42:17 +0800 Subject: [PATCH] =?UTF-8?q?2.3.1=E5=B0=8F=E8=8A=82=E4=B9=A0=E9=A2=98?= =?UTF-8?q?=E3=80=81=E5=85=B3=E9=94=AE=E5=AD=97=E6=B7=BB=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../exercises.json" | 2 +- .../exercises.json" | 2 +- .../exercises.json" | 2 +- .../exercises.json" | 2 +- .../exercises.json" | 2 +- .../exercises.json" | 2 +- .../config.json" | 13 ++- .../exercises.json" | 7 ++ .../exercises.md" | 84 +++++++++++++++++++ .../config.json" | 8 -- .../config.json" | 8 -- .../config.json" | 8 -- .../config.json" | 8 -- data/tree.json | 36 ++++---- 14 files changed, 128 insertions(+), 56 deletions(-) create mode 100644 "data/2.Vue\344\270\255\351\230\266/3.VueX\347\212\266\346\200\201\347\256\241\347\220\206/1.VueX\346\230\257\344\273\200\344\271\210\357\274\237/exercises.json" create mode 100644 "data/2.Vue\344\270\255\351\230\266/3.VueX\347\212\266\346\200\201\347\256\241\347\220\206/1.VueX\346\230\257\344\273\200\344\271\210\357\274\237/exercises.md" delete mode 100644 "data/2.Vue\344\270\255\351\230\266/3.VueX\347\212\266\346\200\201\347\256\241\347\220\206/2.\344\275\277\347\224\250VueX\347\232\204\344\274\230\345\212\277/config.json" delete mode 100644 "data/2.Vue\344\270\255\351\230\266/3.VueX\347\212\266\346\200\201\347\256\241\347\220\206/3.Vuex\347\232\204\345\256\211\350\243\205\344\270\216\351\205\215\347\275\256/config.json" delete mode 100644 "data/2.Vue\344\270\255\351\230\266/3.VueX\347\212\266\346\200\201\347\256\241\347\220\206/4.VueX\347\232\204\346\240\270\345\277\203\345\206\205\345\256\271/config.json" delete mode 100644 "data/2.Vue\344\270\255\351\230\266/3.VueX\347\212\266\346\200\201\347\256\241\347\220\206/5.VueX\350\277\207\347\250\213\345\210\206\346\236\220/config.json" diff --git "a/data/2.Vue\344\270\255\351\230\266/2.Vue-router/4.\345\212\250\346\200\201\350\267\257\347\224\261/exercises.json" "b/data/2.Vue\344\270\255\351\230\266/2.Vue-router/4.\345\212\250\346\200\201\350\267\257\347\224\261/exercises.json" index 8866a84..1173efd 100644 --- "a/data/2.Vue\344\270\255\351\230\266/2.Vue-router/4.\345\212\250\346\200\201\350\267\257\347\224\261/exercises.json" +++ "b/data/2.Vue\344\270\255\351\230\266/2.Vue-router/4.\345\212\250\346\200\201\350\267\257\347\224\261/exercises.json" @@ -1,6 +1,6 @@ { "type": "code_options", - "author": null, + "author": "zhaoss", "source": "exercises.md", "notebook_enable": false, "exercise_id": "50eb995df9b24f2b8387df3b055e49f7" diff --git "a/data/2.Vue\344\270\255\351\230\266/2.Vue-router/5.\350\267\257\347\224\261\347\273\204\344\273\266\344\274\240\345\217\202/exercises.json" "b/data/2.Vue\344\270\255\351\230\266/2.Vue-router/5.\350\267\257\347\224\261\347\273\204\344\273\266\344\274\240\345\217\202/exercises.json" index bd2e072..e3c0c0a 100644 --- "a/data/2.Vue\344\270\255\351\230\266/2.Vue-router/5.\350\267\257\347\224\261\347\273\204\344\273\266\344\274\240\345\217\202/exercises.json" +++ "b/data/2.Vue\344\270\255\351\230\266/2.Vue-router/5.\350\267\257\347\224\261\347\273\204\344\273\266\344\274\240\345\217\202/exercises.json" @@ -1,6 +1,6 @@ { "type": "code_options", - "author": null, + "author": "zhaoss", "source": "exercises.md", "notebook_enable": false, "exercise_id": "9dad4fcbf6e94de18af2f6117af59322" diff --git "a/data/2.Vue\344\270\255\351\230\266/2.Vue-router/6.\350\267\257\347\224\261\351\207\215\345\256\232\345\220\221\345\222\214\345\210\253\345\220\215/exercises.json" "b/data/2.Vue\344\270\255\351\230\266/2.Vue-router/6.\350\267\257\347\224\261\351\207\215\345\256\232\345\220\221\345\222\214\345\210\253\345\220\215/exercises.json" index 1670ca2..f17c303 100644 --- "a/data/2.Vue\344\270\255\351\230\266/2.Vue-router/6.\350\267\257\347\224\261\351\207\215\345\256\232\345\220\221\345\222\214\345\210\253\345\220\215/exercises.json" +++ "b/data/2.Vue\344\270\255\351\230\266/2.Vue-router/6.\350\267\257\347\224\261\351\207\215\345\256\232\345\220\221\345\222\214\345\210\253\345\220\215/exercises.json" @@ -1,6 +1,6 @@ { "type": "code_options", - "author": null, + "author": "zhaoss", "source": "exercises.md", "notebook_enable": false, "exercise_id": "17442c8cb5f14f6fa39fc55f4700563c" diff --git "a/data/2.Vue\344\270\255\351\230\266/2.Vue-router/7.\350\267\257\347\224\261\346\250\241\345\274\217/exercises.json" "b/data/2.Vue\344\270\255\351\230\266/2.Vue-router/7.\350\267\257\347\224\261\346\250\241\345\274\217/exercises.json" index b9937dd..f7e8db5 100644 --- "a/data/2.Vue\344\270\255\351\230\266/2.Vue-router/7.\350\267\257\347\224\261\346\250\241\345\274\217/exercises.json" +++ "b/data/2.Vue\344\270\255\351\230\266/2.Vue-router/7.\350\267\257\347\224\261\346\250\241\345\274\217/exercises.json" @@ -1,6 +1,6 @@ { "type": "code_options", - "author": null, + "author": "zhaoss", "source": "exercises.md", "notebook_enable": false, "exercise_id": "172676598a5049d1832659fda62f34a5" diff --git "a/data/2.Vue\344\270\255\351\230\266/2.Vue-router/8.\345\211\215\347\275\256\350\267\257\347\224\261\345\256\210\345\215\253/exercises.json" "b/data/2.Vue\344\270\255\351\230\266/2.Vue-router/8.\345\211\215\347\275\256\350\267\257\347\224\261\345\256\210\345\215\253/exercises.json" index 0e960f6..f8bd7e5 100644 --- "a/data/2.Vue\344\270\255\351\230\266/2.Vue-router/8.\345\211\215\347\275\256\350\267\257\347\224\261\345\256\210\345\215\253/exercises.json" +++ "b/data/2.Vue\344\270\255\351\230\266/2.Vue-router/8.\345\211\215\347\275\256\350\267\257\347\224\261\345\256\210\345\215\253/exercises.json" @@ -1,6 +1,6 @@ { "type": "code_options", - "author": null, + "author": "zhaoss", "source": "exercises.md", "notebook_enable": false, "exercise_id": "5b5ba3fc48d449bdb1a8826803f7da5d" diff --git "a/data/2.Vue\344\270\255\351\230\266/2.Vue-router/9.\345\220\216\347\275\256\350\267\257\347\224\261\345\256\210\345\215\253/exercises.json" "b/data/2.Vue\344\270\255\351\230\266/2.Vue-router/9.\345\220\216\347\275\256\350\267\257\347\224\261\345\256\210\345\215\253/exercises.json" index fd8e14d..8233744 100644 --- "a/data/2.Vue\344\270\255\351\230\266/2.Vue-router/9.\345\220\216\347\275\256\350\267\257\347\224\261\345\256\210\345\215\253/exercises.json" +++ "b/data/2.Vue\344\270\255\351\230\266/2.Vue-router/9.\345\220\216\347\275\256\350\267\257\347\224\261\345\256\210\345\215\253/exercises.json" @@ -1,6 +1,6 @@ { "type": "code_options", - "author": null, + "author": "zhaoss", "source": "exercises.md", "notebook_enable": false, "exercise_id": "fb46478694144ee787c0f1f66f3118f5" diff --git "a/data/2.Vue\344\270\255\351\230\266/3.VueX\347\212\266\346\200\201\347\256\241\347\220\206/1.VueX\346\230\257\344\273\200\344\271\210\357\274\237/config.json" "b/data/2.Vue\344\270\255\351\230\266/3.VueX\347\212\266\346\200\201\347\256\241\347\220\206/1.VueX\346\230\257\344\273\200\344\271\210\357\274\237/config.json" index 59d2249..6ca3291 100644 --- "a/data/2.Vue\344\270\255\351\230\266/3.VueX\347\212\266\346\200\201\347\256\241\347\220\206/1.VueX\346\230\257\344\273\200\344\271\210\357\274\237/config.json" +++ "b/data/2.Vue\344\270\255\351\230\266/3.VueX\347\212\266\346\200\201\347\256\241\347\220\206/1.VueX\346\230\257\344\273\200\344\271\210\357\274\237/config.json" @@ -1,8 +1,15 @@ { "node_id": "vue-fbae70777d8d4a8fb2a47231ee301eef", - "keywords": [], + "keywords": [ + "VueX是什么", + "什么是VueX" + ], "children": [], - "export": [], - "keywords_must": [], + "export": [ + "exercises.json" + ], + "keywords_must": [ + "VueX" + ], "keywords_forbid": [] } \ No newline at end of file diff --git "a/data/2.Vue\344\270\255\351\230\266/3.VueX\347\212\266\346\200\201\347\256\241\347\220\206/1.VueX\346\230\257\344\273\200\344\271\210\357\274\237/exercises.json" "b/data/2.Vue\344\270\255\351\230\266/3.VueX\347\212\266\346\200\201\347\256\241\347\220\206/1.VueX\346\230\257\344\273\200\344\271\210\357\274\237/exercises.json" new file mode 100644 index 0000000..6d2ad0b --- /dev/null +++ "b/data/2.Vue\344\270\255\351\230\266/3.VueX\347\212\266\346\200\201\347\256\241\347\220\206/1.VueX\346\230\257\344\273\200\344\271\210\357\274\237/exercises.json" @@ -0,0 +1,7 @@ +{ + "type": "code_options", + "author": null, + "source": "exercises.md", + "notebook_enable": false, + "exercise_id": "db244175d01241fbbaa1faab01934943" +} \ No newline at end of file diff --git "a/data/2.Vue\344\270\255\351\230\266/3.VueX\347\212\266\346\200\201\347\256\241\347\220\206/1.VueX\346\230\257\344\273\200\344\271\210\357\274\237/exercises.md" "b/data/2.Vue\344\270\255\351\230\266/3.VueX\347\212\266\346\200\201\347\256\241\347\220\206/1.VueX\346\230\257\344\273\200\344\271\210\357\274\237/exercises.md" new file mode 100644 index 0000000..4d790f7 --- /dev/null +++ "b/data/2.Vue\344\270\255\351\230\266/3.VueX\347\212\266\346\200\201\347\256\241\347\220\206/1.VueX\346\230\257\344\273\200\344\271\210\357\274\237/exercises.md" @@ -0,0 +1,84 @@ +# VueX是什么 + +
小常识：
+
+ +**什么是vuex** +Vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间的数据共享，是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 + +**状态管理模式** + +让我们从一个简单的 Vue 计数应用开始： +```javascript +const Counter = { + // 状态 + data () { + return { + count: 0 + } + }, + // 视图 + template: ` +
{{ count }}
+ `, + // 操作 + methods: { + increment () { + this.count++ + } + } +} + +createApp(Counter).mount('#app') +``` +这个状态自管理应用包含以下几个部分： + +状态，驱动应用的数据源； +视图，以声明方式将状态映射到视图； +操作，响应在视图上的用户输入导致的状态变化。 +以下是一个表示“单向数据流”理念的简单示意： +![在这里插入图片描述](https://img-blog.csdnimg.cn/1aff3691c4c24274bf9d93ae04269acd.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yeg5L2V5b-D5YeJ,size_18,color_FFFFFF,t_70,g_se,x_16) +但是，当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏： + +多个视图依赖于同一状态。 +来自不同视图的行为需要变更同一状态。 +对于问题一，传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。对于问题二，我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱，通常会导致无法维护的代码。 + +因此，我们为什么不把组件的共享状态抽取出来，以一个全局单例模式管理呢？在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为！ + +通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的独立性，我们的代码将会变得更结构化且易维护。 + +这就是 Vuex 背后的基本思想，借鉴了 Flux、Redux 和 The Elm Architecture。与其他模式不同的是，Vuex 是专门为 Vue.js 设计的状态管理库，以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。 + +**Vuex管理数据的优点** + +A.能够在vuex中集中管理共享的数据，便于开发和后期进行维护 + +B.能够高效的实现组件之间的数据共享，提高开发效率 + +C.存储在vuex中的数据是响应式的，当数据发生改变时，页面中的数据也会同步更新 + +
+ +
小测试：
+ + +根据上方小常识，以下关于VueX的说法不正确的是？

+ +## 答案 + +Vuex无法使多个组件共享状态 + +## 选项 + +### A + +Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库 + +### B + +它采用集中式存储管理应用的所有组件的状态 + +### C + +Vuex 以相应的规则保证状态以一种可预测的方式发生变化 diff --git "a/data/2.Vue\344\270\255\351\230\266/3.VueX\347\212\266\346\200\201\347\256\241\347\220\206/2.\344\275\277\347\224\250VueX\347\232\204\344\274\230\345\212\277/config.json" "b/data/2.Vue\344\270\255\351\230\266/3.VueX\347\212\266\346\200\201\347\256\241\347\220\206/2.\344\275\277\347\224\250VueX\347\232\204\344\274\230\345\212\277/config.json" deleted file mode 100644 index eb62cb7..0000000 --- "a/data/2.Vue\344\270\255\351\230\266/3.VueX\347\212\266\346\200\201\347\256\241\347\220\206/2.\344\275\277\347\224\250VueX\347\232\204\344\274\230\345\212\277/config.json" +++ /dev/null @@ -1,8 +0,0 @@ -{ - "node_id": "vue-c49cf67c39b44bc4b56b8d6966e97ec7", - "keywords": [], - "children": [], - "export": [], - "keywords_must": [], - "keywords_forbid": [] -} \ No newline at end of file diff --git "a/data/2.Vue\344\270\255\351\230\266/3.VueX\347\212\266\346\200\201\347\256\241\347\220\206/3.Vuex\347\232\204\345\256\211\350\243\205\344\270\216\351\205\215\347\275\256/config.json" "b/data/2.Vue\344\270\255\351\230\266/3.VueX\347\212\266\346\200\201\347\256\241\347\220\206/3.Vuex\347\232\204\345\256\211\350\243\205\344\270\216\351\205\215\347\275\256/config.json" deleted file mode 100644 index 64cc839..0000000 --- "a/data/2.Vue\344\270\255\351\230\266/3.VueX\347\212\266\346\200\201\347\256\241\347\220\206/3.Vuex\347\232\204\345\256\211\350\243\205\344\270\216\351\205\215\347\275\256/config.json" +++ /dev/null @@ -1,8 +0,0 @@ -{ - "node_id": "vue-0bd1547bbb68451086e3d4b2f4f51f3e", - "keywords": [], - "children": [], - "export": [], - "keywords_must": [], - "keywords_forbid": [] -} \ No newline at end of file diff --git "a/data/2.Vue\344\270\255\351\230\266/3.VueX\347\212\266\346\200\201\347\256\241\347\220\206/4.VueX\347\232\204\346\240\270\345\277\203\345\206\205\345\256\271/config.json" "b/data/2.Vue\344\270\255\351\230\266/3.VueX\347\212\266\346\200\201\347\256\241\347\220\206/4.VueX\347\232\204\346\240\270\345\277\203\345\206\205\345\256\271/config.json" deleted file mode 100644 index 4d2652f..0000000 --- "a/data/2.Vue\344\270\255\351\230\266/3.VueX\347\212\266\346\200\201\347\256\241\347\220\206/4.VueX\347\232\204\346\240\270\345\277\203\345\206\205\345\256\271/config.json" +++ /dev/null @@ -1,8 +0,0 @@ -{ - "node_id": "vue-6f4473024d73448bb01674d9d17bdeac", - "keywords": [], - "children": [], - "export": [], - "keywords_must": [], - "keywords_forbid": [] -} \ No newline at end of file diff --git "a/data/2.Vue\344\270\255\351\230\266/3.VueX\347\212\266\346\200\201\347\256\241\347\220\206/5.VueX\350\277\207\347\250\213\345\210\206\346\236\220/config.json" "b/data/2.Vue\344\270\255\351\230\266/3.VueX\347\212\266\346\200\201\347\256\241\347\220\206/5.VueX\350\277\207\347\250\213\345\210\206\346\236\220/config.json" deleted file mode 100644 index 5cdd0a5..0000000 --- "a/data/2.Vue\344\270\255\351\230\266/3.VueX\347\212\266\346\200\201\347\256\241\347\220\206/5.VueX\350\277\207\347\250\213\345\210\206\346\236\220/config.json" +++ /dev/null @@ -1,8 +0,0 @@ -{ - "node_id": "vue-8584659f9ee64c9495f16834eb7fe969", - "keywords": [], - "children": [], - "export": [], - "keywords_must": [], - "keywords_forbid": [] -} \ No newline at end of file diff --git a/data/tree.json b/data/tree.json index be995e3..d9b6b52 100644 --- a/data/tree.json +++ b/data/tree.json @@ -557,36 +557,42 @@ { "VueX是什么？": { "node_id": "vue-fbae70777d8d4a8fb2a47231ee301eef", - "keywords": [], - "children": [], - "keywords_must": [], - "keywords_forbid": [] - } - }, - { - "使用VueX的优势": { - "node_id": "vue-c49cf67c39b44bc4b56b8d6966e97ec7", - "keywords": [], + "keywords": [ + "VueX是什么", + "什么是VueX" + ], "children": [], - "keywords_must": [], + "keywords_must": [ + "VueX" + ], "keywords_forbid": [] } }, { "Vuex的安装与配置": { "node_id": "vue-0bd1547bbb68451086e3d4b2f4f51f3e", - "keywords": [], + "keywords": [ + "VueX的安装与配置", + "VueX的安装" + ], "children": [], - "keywords_must": [], + "keywords_must": [ + "VueX" + ], "keywords_forbid": [] } }, { "VueX的核心内容": { "node_id": "vue-6f4473024d73448bb01674d9d17bdeac", - "keywords": [], + "keywords": [ + "VueX核心内容", + "VueX核心" + ], "children": [], - "keywords_must": [], + "keywords_must": [ + "VueX" + ], "keywords_forbid": [] } }, -- GitLab