类flux状态管理的官方实现

由于多个状态分散的跨越在许多组件和交互间的各个角落,大型应用复杂度也经常逐渐增长。

为了解决这个问题,vue提供了vuex:我们有收到elm启发的状态管理库,vuex甚至集成到vue-detools。无须配置即可访问时光旅行。

简单状态管理起步使用

经常被忽略的是,Vue应用中原始数据对象的实际来源-当访问数据对象时,一个vue实例只是简单的代理访问。所以,如果你有一处需要被多个实例间共享的状态,可以简单的通过维护一份数据来实现共享:

const sourceOfTruth = {}

const vmA = new Vue({

data:sourceOfTruth

})

const vmB = new Vue({

data:sourceOfTruth

})

现在当sourceOfTruth发生变化,vmA和vmB都将自动的更新引用他们的视图。子组件们的每个实例也会通过this.$root.$data去访问。现在我们有了唯一的实际来源,但是调试会成为噩梦。任何时间,我们应用中的任何部分,在任何数据改变后,都不会留下变更过的纪录。

为了解决这个问题,我们采用一个简单的store模式:

var store = {

debug:true,

state:{

message:'Hello!'

},

setMessageAction(newValue){

if(this.debug)console.log('setMessageAction triggered with',newValue)

this.state.message = newValue

},

clearMessageAction(){

if(this.debug)console.log('setMessage triggered')

this.state.message = ''

}

}

需要注意的是,所有store中state的改变,都放置在store自身的action中去管理。这种集中式状态管理能够被更容易地理解那种类型的mutation将会发生,以及他们是如何被触发。当错误出现时,我们现在也会有一个log记录bug之前发生了什么。

此外,每个实例/组件仍然可以拥有和管理自己的私有状态:

var vmA = new Vue({

data:{

privateState:{},

sharedState:store.state

}

})

var vmB = new Vue({

data:{

privateState:{},

sharedState:store.state

}

})

重要的是,注意你不应该在action中替换原始的状态对象-组件和store需要引用同一个共享对象,mutation才能够被观察

组件不允许直接修改属于store实例的state,而应执行action来分发(dispatch)事件通知store去改变,我们最终达成了flux架构。这样约定的好处是,我们能够纪录所有store中发生的state改变,同时实现能做到纪录变更(mutation)、保存状态快照、历史回滚/时光旅行的先进的调试工具。

Vue 状态管理的更多相关文章

  1. Vue状态管理vuex

    前面的话 由于多个状态分散的跨越在许多组件和交互间各个角落,大型应用复杂度也经常逐渐增长.为了解决这个问题,Vue提供了vuex.本文将详细介绍Vue状态管理vuex 引入 当访问数据对象时,一个 V ...

  2. vue状态管理器(用户登录简单应用)

    技术点:通过vue状态管理器,对已经登录的用户显示不同的页面: 一  vue之状态管理器应用 主要用来存储cookie信息 与vue-cookies一起使用 安装:npm install vue-co ...

  3. vuex(vue状态管理)

    vuex(vue状态管理) 1.先安装vuex npm install vuex --save   2.在项目的src目录下创建store目录,并且新建index.js文件,然后创建vuex实例,引入 ...

  4. Vue状态管理之Vuex

    Vuex是专为Vue.js设计的状态管理模式.采用集中存储组件状态它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 1.首先让我们从一个vue的计数应用开始 ...

  5. Vue状态管理

    1.导出Vuex import Vuex from 'vuex' 2.定义store /*状态管理*/ const store = new Vuex.Store({ state: { headerSh ...

  6. vue - 状态管理器 Vuex

    状态管理 vuex是一个专门为vue.js设计的集中式状态管理架构.状态?我把它理解为在data中的属性需要共享给其他vue组件使用的部分,就叫做状态.简单的说就是data中需要共用的属性.

  7. 五、vue状态管理模式vuex

    一.vuex介绍 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 即data中属性同时有一 ...

  8. vuex vue状态管理

    第一步安装vuex(安装在生产环境) npm install vuex 第二步 src下新建store文件夹 用来专门放状态管理,store文件夹下新建四个js文件 index.js  actions ...

  9. Vue状态管理之Bus

    一般在项目中,状态管理都是使用Vue官方提供的Vuex 当在多组件之间共享状态变得复杂时,使用Vuex,此外也可以使用Bus来进行简单的状态管理 1.1 父组件与子组件之间的通信 vue.config ...

随机推荐

  1. 转:RSA算法原理说明

    转:http://www.joenchen.com/archives/979 RSA算法可以说在我们使用计算机的每一方面都在发挥着作用, EXE文件的签名算法用的是SHA1 + RSA. 我们每天登陆 ...

  2. 最佳实践扩展Windows窗体DataGridView控件 .net 4.5 附示例代码

    Windows窗体DataGridView控件的性能调优.net 4.5   在处理大量数据时, DataGridView 控制可以消耗大量的内存开销,除非你仔细地使用它. 在客户有限的内存,你可以避 ...

  3. 用一段直径为1的原木制作截面是矩形的横梁,问梁的宽度x和高度y是怎样的比例时,才能使梁的强度最大?

    解:根据经验,梁的强度与高度平方成正比,和宽度成反比,可以写成 q=y2x 又有x2+y2=1,得到 q=(1-x2)x=x-x3 而导数q'=1-3x2,当q'=0时,q有极值 q'=0时,x=1/ ...

  4. javascript代码在线测试

    目前还不可用,有知道的怎么搞的,请告知我下,谢谢! alert("欢迎使用javascript在线测试工具");

  5. 华为P6-C00电信版,刷机总是失败? FAIL

    关于这个刷机失败的问题,我只想说一点: 华为P6-C00电信版刷机时,不是任意版本都可以刷到任意版本的.我只往上刷过,那就是华为的升级文档中有说明:“只有以下版本才可以升级到此版本”. 如果你的手机的 ...

  6. Box layout

    Layout management with layout classes is much more flexible and practical. It is the preferred way t ...

  7. Jquery重新学习之六[操作XML数据]

    上一章整理有关Jquery操作JSON格式数据,本章则是整理Jquery与XML的交互,因为XML简单易用及运用在很跨平台上的优点,所以项目运用Jquery操作XML还是比较常见:下面的代码来自Jqu ...

  8. Servlet之生命周期【入门版(刚開始学习的人必看)】

    6,Servlet的解说 6.1Servlet生命周期 ,继承HttpServlet init方法(初始化Servlet)将来能够做一些初始化工作 service方法(处理请求) 一般不须要重写ser ...

  9. ACE-Task结构介绍(二)——消息块ACE_Message_Block结构的分析

    消息块ACE_Message_Block结构的分析 包含一个指向带引用计数功能的ACE_Data_Block对象,该对象指向正在的数据缓冲区,这样可以在ACE_Message_Block对象之间灵活. ...

  10. Android开发之Shortcuts, LiveFolder, Widget

    2013-07-05 桌面组件包括:快捷方式(Shortcuts),实时文件夹(Live Folder),桌面插件(Widget).   快捷方式用于启动应用程序的某个组件,例如Activity, S ...