Vue 状态管理
类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 状态管理的更多相关文章
- Vue状态管理vuex
前面的话 由于多个状态分散的跨越在许多组件和交互间各个角落,大型应用复杂度也经常逐渐增长.为了解决这个问题,Vue提供了vuex.本文将详细介绍Vue状态管理vuex 引入 当访问数据对象时,一个 V ...
- vue状态管理器(用户登录简单应用)
技术点:通过vue状态管理器,对已经登录的用户显示不同的页面: 一 vue之状态管理器应用 主要用来存储cookie信息 与vue-cookies一起使用 安装:npm install vue-co ...
- vuex(vue状态管理)
vuex(vue状态管理) 1.先安装vuex npm install vuex --save 2.在项目的src目录下创建store目录,并且新建index.js文件,然后创建vuex实例,引入 ...
- Vue状态管理之Vuex
Vuex是专为Vue.js设计的状态管理模式.采用集中存储组件状态它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 1.首先让我们从一个vue的计数应用开始 ...
- Vue状态管理
1.导出Vuex import Vuex from 'vuex' 2.定义store /*状态管理*/ const store = new Vuex.Store({ state: { headerSh ...
- vue - 状态管理器 Vuex
状态管理 vuex是一个专门为vue.js设计的集中式状态管理架构.状态?我把它理解为在data中的属性需要共享给其他vue组件使用的部分,就叫做状态.简单的说就是data中需要共用的属性.
- 五、vue状态管理模式vuex
一.vuex介绍 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 即data中属性同时有一 ...
- vuex vue状态管理
第一步安装vuex(安装在生产环境) npm install vuex 第二步 src下新建store文件夹 用来专门放状态管理,store文件夹下新建四个js文件 index.js actions ...
- Vue状态管理之Bus
一般在项目中,状态管理都是使用Vue官方提供的Vuex 当在多组件之间共享状态变得复杂时,使用Vuex,此外也可以使用Bus来进行简单的状态管理 1.1 父组件与子组件之间的通信 vue.config ...
随机推荐
- Web开发者需养成的8个好习惯
优秀的Web开发人员工作效率更高,因为他们拥有丰富的经验和良好的习惯.作者Gregor Dorfbauer分享了用于Web开发中的8个好习惯,这些良好的工作习惯不仅能提高效率,还能让您创建更加优秀的应 ...
- MapReduce中的分布式缓存使用
MapReduce中的分布式缓存使用 @(Hadoop) 简介 DistributedCache是Hadoop为MapReduce框架提供的一种分布式缓存机制,它会将需要缓存的文件分发到各个执行任务的 ...
- STM32 控制GSM模块收发信息 F407 discovery
main.c #include "stm32f4_discovery.h" #include <stdio.h> #define LED1_ON GPIO_SetBit ...
- Cognos开发ContentManagerServiceStub不能转换为Stub
Cognos SDK开发过程中遇到的小错误详细请看下图 另:附加了详细的错误信息 Exception in thread "main" java.lang.ClassCastExc ...
- angular中定义全局变量及全局变量的使用
一个例子,定义了两个变量,并且把变量显示出来: <!DOCTYPE html> <html ng-app="myApp"> <head> < ...
- send返回值
http://blog.csdn.net/anghlq/article/details/5990513 在Unix系统下,如果send . recv . write在等待协议传送数据时 , socke ...
- js正则表达式test方法、exec方法与字符串search方法区别
1.正则表达式test方法 test() 方法用于检测一个字符串是否匹配某个模式 返回值: 如果字符串 string 中含有与 RegExpObject 匹配的文本,则返回 true,否则返回 fal ...
- OFBiz:初始RequestHandler
RequestHandler,可以称之为请求处理器,在ControlServlet.init()中初始化: public class ControlServlet extends HttpServle ...
- MySQL —— 如何快速对比数据?
我们在MySql中想要对比下两个不同的实例上的数据并且找出差异,除了主键之外我们还要对比每一个字段,应该怎么做呢? 方案一:写一个程序将两个实例里面的每一行数据都分别取出来对比,但是耗时我们无法估计, ...
- ML 与 DM 工具 Weka 的使用
1.关于Weka Weka 的全名是怀卡托智能分析环境(Waikato Environment for Knowledge Analysis),是一款免费的.非商业化(与之对应的是SPSS公司商业数据 ...