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 8866a84f3be179957e2728703b69bff082f71d22..1173efd839fe27aae2b781b06391e02517117456 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 bd2e072aaebe97581c9e1ba52803ef28a3625578..e3c0c0ab79c6d91eae31563e038e78c9765086c4 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 1670ca2f986e2a768e76bded0a62f250a5a01000..f17c30392c139fe4a65ad4ce38974c581b7758f3 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 b9937dd30fc3b852e1ce536922d6050fdaf22e29..f7e8db55e61987c1f1b6d07e9668f4e20a0f5477 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 0e960f6d314433c3bc3857bbcf7b86268737d279..f8bd7e5f37488c05bfe8c36d38b8e1258afa235f 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 fd8e14df4b6acd32187ce30d21058be68e138faf..82337447126209c31381cd6629d7693a98a7a5e1 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 59d224968b6dad45f6d76d6f34c01d1a4d25a449..6ca32916545a512dcfb2cbdb24c208b8cfe51d69 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 0000000000000000000000000000000000000000..6d2ad0b4b86c58ee13f6f47c7c7545fbb69a779b --- /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 0000000000000000000000000000000000000000..4d790f71d70109547a853104d60ca6a3b31c5450 --- /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 eb62cb70dea3258cb7a0d2291e868022746e36d3..0000000000000000000000000000000000000000 --- "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 64cc839d72085c93d10b996c89bb90787ba77409..0000000000000000000000000000000000000000 --- "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 4d2652ff4f2c3872d7b41a0253be0324155cfbdc..0000000000000000000000000000000000000000 --- "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 5cdd0a5fd5b6f0f1f2029d4a058b6d5ae58d4432..0000000000000000000000000000000000000000 --- "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 be995e37191bcf1062d76bd00fe8f470aa4931d6..d9b6b52fa2e7fea924491c9be6f0bceeb2d20206 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": [] } },