美文网首页马文的地下室
学习笔记《Vue 的 Flux 实现》

学习笔记《Vue 的 Flux 实现》

作者: 马文Marvin | 来源:发表于2017-05-01 17:28 被阅读24次

    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')
    

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

    相关文章

      网友评论

        本文标题:学习笔记《Vue 的 Flux 实现》

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