美文网首页
Vuex的使用和理解

Vuex的使用和理解

作者: 忆往夕 | 来源:发表于2021-01-10 09:57 被阅读0次

    简单说一说vuex使用以及对它的理解?

    生命周期

    Vuex的定义

    Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new window),提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能

    理解

    1. vuex 是 vue 专用的状态管理库。它以全局方式集中管理应用的状态,并且可以保证状态变更的可预测性
    2. vuex 主要解决的问题是多组件之间状态共享的问题,利用各种组件通信方式,我们虽然能够做到状态共享,但是往往需要在多个组件之间保持状态的一致性,这种模式很容易出现问题,也会使程序逻辑变得复杂。 vuex 通过把组件的共享状态抽取出来,以全局单例模式管理,这样任何组件都能用一致的方式获取和修改状态,响应式的数据也能够保证简洁的单向数据流动,我们的代码将变得更结构化且易维护。
    3. vuex 并非必须的,它帮我们管理共享状态,但却带来更多的概念和框架。如果我们不打算开发大型单页应用或者我们的应用并没有大量全局的状态需要维护,完全没有使用 vuex 的必要。一个简单的 Store 模式就足够了。反之, Vuex 将会成为自然而然的选择。引用 Redux 的作者 Oan Abramov 的话说就是:Flux 架构就像眼镜:您自会知道什么时候需要它。
    4. 我在使用 vuex 过程中有如下理解:首先是对核心概念的理解和运用,将全局状态放入 state 对象中,它本身一棵状态树,组件中使用 Store 实例的 state 访问这些状态;然后有配套的 mutation 方法修改这些状态,并且只能用 mutation 修改状态,在组件中调用 commit 方法提交 mutation ;如果应用中有异步操作或者复杂逻辑组合,我们需要编写 action ,执行结束如果有状态修改仍然需要提交 mutation ,组件中调用这些 action 使用 dispatch 方法派发。最后是模块化,通过 modules 选项组织拆分出去的各个子模块,在访问状态时注意添加子模块的名称,如果子模块有设置 namespace ,那么在提交 mutation 和派发 action 时还需要额外的命名空间前缀。
    5. vuex 在实现单项数据流时需要做到数据的响应式,通过源码的学习发现是借用了 vue 的数据响应化特性实现的,它会利用 Vue将state 作为 data 对其进行响应化处理,从而使得这些状态发生变化时,能够导致组件重新渲染。

    相关文章

      网友评论

          本文标题:Vuex的使用和理解

          本文链接:https://www.haomeiwen.com/subject/usrkaktx.html