了解Vuex

Vuex是什么?

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


Vue 计数应用:

  newVue({

  data () {

     return{count:0}

      },

   template: `<div>{{count}}</div>`,

  methods: {

      increment () {

           this.count++

  } 

  }

 });

这个状态自管理应用包含以下几个部分:

      state,驱动应用的数据源;

      view,以声明方式将state映射到视图;

     actions,响应在view上的用户输入导致的状态变化。


什么情况下使用 Vuex?

          虽然 Vuex 可以帮助我们管理共享状态,但也附带了更多的概念和框架。这需要对短期和长期效益进行权衡。  如果不打算开发大型单页应用,使用 Vuex 可能是繁琐冗余的。确实是如此——如果应用够简单,最好不要使用 Vuex。一个简单的global event bus就足够所需了。但是,如果需要构建是一个中大型单页应用,很可能会考虑如何更好地在组件外部管理状态,Vuex 将会成为自然而然的选择。


     在Mvc模式大行其道的今天,后端通过各种Mvc框架实现视图与数据模型的隔离,而前端这方面也发展迅速。vue实现了Dom与viewModel双向绑定,使其视图的更新影响模型,模型的更新影响视图,你会不会觉得这就是Mvc库呢,实则不然,因为他还差一个重要的C(也就是控制器)。

    M:模型用于表示各种事物及事物特性的数据

   v:view + viewModel,此处鄙人认为v不能单纯的理解为视图,而应该是视图+视图模型。

   c:控制器,用于协调M与v之间的关系。


我对vuex的理解

           这个重要的C是谁呢,鄙人认为就是此文章要介绍的Vuex(如果你想初识vue,可以移步vue原来可以这样上手这篇博文)。如此理解也是可以的:vue + vuex = 前端mvc框架

 flux(单向数据流)

actions:一个动作,可以是view创建的,也可以是程序其他逻辑创建的

dispatcher:将业务逻辑与用户界面分离,负责响应action动作事件,并意向传遍整个系统

store:业务逻辑处理

view:视图

vuex是借鉴了flux、redux、The Elm Architecture等相关思想。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

友情链接更多精彩内容