学习笔记《Vue 的 Flux 实现》

Flux 是目前最被普遍认可的前端架构,受到 React Angular Vue 的一致推荐,是不可避免的趋势:

  • iOS、Andriod、Web多端原生系统,技术栈迥异,造成前端技术成为发展的共识
  • 前端系统复杂度不断提升,MVC 架构先天不足
  • IE 逐渐退出主流,新一代浏览器占领市场

什么是 Flux

Flux 是 Facebook 系统化的一套响应式编程架构方案:

Flux is the application architecture that Facebook uses for building client-side web applications. It complements React's composable view components by utilizing a unidirectional data flow. It's more of a pattern rather than a formal framework, and you can start using Flux immediately without a lot of new code.

这里有一个带视频的详细介绍:
https://facebook.github.io/flux/docs/in-depth-overview.html

Vue 的 Flux 实现

Vue 的 Flux 实现有一本电子书做了细致的介绍:《Vuex Concepts: The Flux Application Architecture for Vue.js》
下载地址:http://bookdl.me/vuex-concepts-the-flux-application-architecture-for-vue-js/

在阅读这本书以后,再借助 Vue 的官方文档就可以很快的推进起来 Flux 架构,需要多种 Vue 技术的配合:

  • Vuex 作为数据状态管理的中心,负责数据存储和调度
  • Vue 本身实现响应式编程机制,对 Vuex 中的数据进行响应
  • vue-router 实现路由的调度,以及 Url 和 component 的结构设计
  • History API 配合 Vuex 对 Url 进行微调

History API

// history API 可以实现 Url 的变化但是不刷新页面
history.replaceState(stateName, 'title', 'urlPartial')

(随着项目的深入,以后会补充细节性的内容)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容