类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. ExtJS ComboBox 录入智能提示

    ExtJS ComboBox非常复杂,有很多的属性:其中有的属性是针对某一种特定的方案而设计的,不是所有情况下都有效.我想下拉选择能支持录入,并且录入时能智能提示,弄了半天可以了,但是只能是mode= ...

  2. ZeroClipboard及其原理介绍

    系列教程地址:http://www.365mini.com/page/zeroclipboard-2_x-quick-start.htm ZeroClipboard 是国外大神开发的一个用于剪贴板复制 ...

  3. mysql的日志管理

    日志操作是数据库维护中最重要的手段之一,日志文件会记录MySQL服务器的各种信息,所以当MySQL服务器遭到意外损坏时,不仅可以通过日志文件来查看出错的原因,而且还可以通过日志文件进行数据恢复. MY ...

  4. 转:RSA算法原理说明

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

  5. 转换到 StoryBoard 的公布说明(Converting to Storyboards Release Notes)

    转换到 StoryBoard 的公布说明(Converting to Storyboards Release Notes) 太阳火神的漂亮人生 (http://blog.csdn.net/opengl ...

  6. 【UNIX网络编程】FIFO

    管道作为进程间通信的最古老方式,它的缺点是没有名字,因此仅仅能用在有亲缘关系的父子进程之间.对于无亲缘关系的进程间.无法用管道进行通信.FIFO能够完毕无亲缘关系的进程间的通信.FIFO也被称为命名管 ...

  7. sparkContext 读取hdfs文件流程及分片机制

  8. 滚动居中效果(frame版)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. Linux命令-目录处理命令:rmdir

    rmdir /tmp/shijiazhuang/yuhuaqu 删除一个子目录(必须是空目录) rmdir /tmp/shijiazhuang 删除一个不为空的目录会失败

  10. C# 非顶端窗口截图 - 用于查找指定窗口并截图

    原文地址:http://blog.csdn.net/u013096568/article/details/53400389 panel上可以通过DrawToBitmap截图,不管是否在屏幕外是否有遮挡 ...