Vuex

谁践踏了优雅 2022-05-14 04:18 298阅读 0赞

Vuex    是⼀个专为    Vue.js    应⽤程序开发的状态管理模式。它采⽤集中式存储管理应⽤的所有组件的状 态，并以相应的规则保证状态以⼀种可预测的⽅式发⽣变化。

### 什么是“状态管理模式”？  ###

![70][]

![70 1][]

### Vuex    初始化 ###

这⼀节我们主要来分析    Vuex    的初始化过程，它包括安装、Store    实例化过程    2    个⽅⾯

![70 2][]

![70 3][]

![70 4][]

![70 5][]

![70 6][]

![70 7][]

![70 8][]

![70 9][]

![70 10][]

![70 11][]

![70 12][]

![70 13][]

![70 14][]

![70 15][]

![70 16][]

![70 17][]

![70 18][]

![70 19][]

总结

那么⾄此，Vuex    的初始化过程就分析完毕了，除了安装部分，我们直播重点分析了        Store        的实例化 过程。我们要把        store        想象成⼀个数据仓库，为了更⽅便的管理仓库，我们把⼀个⼤的        store        拆 成⼀些        modules    ，整个        modules        是⼀个树型结构。每个        module        ⼜分别定义了    state    ，    getters    ，    mutations    、    actions    ，我们也通过递归遍历模块的⽅式都完成了它们的初 始化。为了        module        具有更⾼的封装度和复⽤性，还定义了        namespace        的概念。最后我们还定义了 ⼀个内部的        Vue        实例，⽤来建⽴        state        到        getters        的联系，并且可以在严格模式下监测    state        的变化是不是来⾃外部，确保改变        state        的唯⼀途径就是显式地提交        mutation    。  
  
这⼀节我们已经建⽴好        store    ，接下来就是对外提供了⼀些    API    ⽅便我们对这个        store        做数据存 取的操作，下⼀节我们就来从源码⾓度来分析        Vuex        提供的⼀系列    API。

![70 20][]

![70 21][]

![70 22][]

![70 23][]

![70 24][]

![70 25][]

这⾥传⼊的        \_type        就是        action        的        type    ，我们可以从        store.\_\_actions        找到对应的函数数 组，遍历它们执⾏获取到每个        handler        然后执⾏，实际上就是执⾏了    wrappedActionHandler(payload)    ，接着会执⾏我们定义的        action        函数，并传⼊⼀个对象，包含 了当前模块下的        dispatch    、    commit    、    getters    、    state    ，以及全局的        rootState        和    rootGetters    ，所以我们定义的        action        函数能拿到当前模块下的        commit        ⽅法。 因此        action        ⽐我们⾃⼰写⼀个函数执⾏异步操作然后提交        muataion        的好处是在于它可以在参数 中获取到当前模块的⼀些⽅法和状态，Vuex    帮我们做好了这些。

### 语法糖  ###

我们知道        store        是        Store        对象的⼀个实例，它是⼀个原⽣的    Javascript    对象，我们可以在任意地⽅ 使⽤它们。但⼤部分的使⽤场景还是在组件中使⽤，那么我们之前介绍过，在    Vuex    安装阶段，它会往 每⼀个组件实例上混⼊        befeforeCreated        钩⼦函数，然后往组件实例上添加⼀个        $store        的实  
  
例，它指向的就是我们实例化的        store    ，因此我们可以在组件中访问到        store        的任何属性和⽅ 法。

![70 26][]

![70 27][]

![70 28][]

![70 29][]

![70 30][]

![70 31][]

![70 32][]

![70 33][]

总结

那么⾄此，Vuex    提供的⼀些常⽤    API    我们就分析完了，包括数据的存取、语法糖、模块的动态更新 等。要理解    Vuex    提供这些    API    都是⽅便我们在对        store        做各种操作来完成各种能⼒，尤其是    mapXXX        的设计，让我们在使⽤    API    的时候更加⽅便，这也是我们今后在设计⼀些    JavaScript    库的时 候，从    API    设计⾓度中应该学习的⽅向。

![70 34][]

![70 35][]

![70 36][]

总结

那么⾄此    Vuex    的插件分析就结束了，Vuex    从设计上⽀持了插件，让我们很好地从外部追踪        store    内部的变化，    Logger        插件在我们的开发阶段也提供了很好地指引作⽤。当然我们也可以⾃⼰去实现    Vuex        的插件，来帮助我们实现⼀些特定的需求。

[70]: /images/20220514/6e06d9e3f9604803a874361e5d808c65.png
[70 1]: /images/20220514/06474e55420a452daedd02baaa6340b3.png
[70 2]: /images/20220514/6a7e084c10c04ef0ba50ce04a5b860bc.png
[70 3]: /images/20220514/20133b65884f468888c7fbe47a5b3f95.png
[70 4]: /images/20220514/c8f32b5c9c7c44c4ba9a9e359ef12a89.png
[70 5]: /images/20220514/c48de398a1354e619511a4c6ab7d0635.png
[70 6]: /images/20220514/da4857268d464ded82a7ab7885bcfb0f.png
[70 7]: /images/20220514/fae8d15256cd406cb5bf6d9ae7467540.png
[70 8]: /images/20220514/b2651cc063634995a52cf200a54f5e68.png
[70 9]: /images/20220514/1d8bd39644c34604b5ce8c8135f703f6.png
[70 10]: /images/20220514/fe7bc200769448e8956645114b8c33f7.png
[70 11]: /images/20220514/85322e7e50a74ddbb48b4edf1e521381.png
[70 12]: /images/20220514/e71e35392d334b318657629f55e34447.png
[70 13]: /images/20220514/cccca634fa1d463fb7743b67bc1fb4f4.png
[70 14]: /images/20220514/bfab3c554b5945ae90b67095e02f61ac.png
[70 15]: /images/20220514/a91a23354dea41388db237cd6029a51c.png
[70 16]: /images/20220514/f29e5eabb4e445c28380bd9fef2bfa26.png
[70 17]: /images/20220514/027dddb988c04530a9cb397df6561452.png
[70 18]: /images/20220514/3fbefa9720ce40e696edc11ab14af869.png
[70 19]: /images/20220514/537e4b72f12149ef9d88f54769805d3e.png
[70 20]: /images/20220514/8e9dad01e02143019618e38eb67a3c9f.png
[70 21]: /images/20220514/05702c5ee13344d88ba54b437f63c7a3.png
[70 22]: /images/20220514/2f00566dc92b4d34ba01b9b87d5db0da.png
[70 23]: /images/20220514/dd669f645e094083a678dd7f326c1f65.png
[70 24]: /images/20220514/27203d90f1414a40956cc19c7d2608e1.png
[70 25]: /images/20220514/eee14f7322d44600bb99c7680edf684a.png
[70 26]: /images/20220514/3e9ac7e6459641f3b2e080e548837f47.png
[70 27]: /images/20220514/88bb93c521644c2795903da6ab461065.png
[70 28]: /images/20220514/1b08bfaa98a043588625b73683ed14a3.png
[70 29]: /images/20220514/73c6d5a2f1ad45c49dc95f0ff97cc517.png
[70 30]: /images/20220514/c0c9ffe1290e461ea06a4b9de767f11a.png
[70 31]: /images/20220514/ebe8530341e841e18ceebefed3ccfba3.png
[70 32]: /images/20220514/a4225729d47a400cac14a109c1722d7a.png
[70 33]: /images/20220514/9426b3c15c5c484786d90a7df23968a1.png
[70 34]: /images/20220514/828060a044b54a4cb8c245a228ac1ffc.png
[70 35]: /images/20220514/54e6ffe1564949efb87d14988175f7b8.png
[70 36]: /images/20220514/6aa29759bbee455cb612b7aec44a5ef6.png