alt.js 使用教程
1.action :
import alt from "../alt.js"; class DemoActions{
constructor() {
this.generateActions(
'updateTodo',
'updateTestData'//注册action名字
)
}
} export default alt.createActions(DemoActions)
2.store:
import alt from "../alt.js" import DemoActions from "../_action/demo.js";
class DemoStore{
constructor() {
this.bindListeners({
updateTodo:DemoActions.updateTodo,
updateTestData:DemoActions.updateTestData//在store中绑定对应的action名字
})
/*this.state={
todos:'465456'
}*/
this.todos='4654654654654'; //这里是注册的store数据,会有事件操作行为来改变这些数据从而改变view
this.testData='skfjsdkljfksdjfksdjf';
}
updateTodo(todo){ //store中的事件促发相应的数据改变
console.log(todo,'store todo')
this.todos=todo[0];
}
updateTestData(todo){
this.testData=todo[0];
}
} export default alt.createStore(DemoStore)
3.view:
import alt from "./alt.js";
import connectToStores from 'alt-utils/lib/connectToStores';
import React,{Component} from "react";
import {render} from "react-dom";
import DemoStore from "./_store/demo.js"; //store和action需要引进来到view中使用
import DemoAction from "./_action/demo.js"; @connectToStores //联系到alt
class Demo extends Component{
static getStores(){
return [DemoStore]; //引入需要的store
}
static getPropsFromStores(){
return DemoStore.getState(); //绑定store到组件的props,这样就可以在view中访问props来访问store的数据
}
constructor(props) {
super(props);
}
render(){
let ramdomData=Math.random()*100;
return(
<div>
<div onClick={DemoAction.updateTestData.bind(DemoAction,ramdomData)}>{this.props.testData}</div> //this.props.testdata 方式来访问store中的数据
<div onClick={DemoAction.updateTodo.bind(DemoAction,'我是上看到房价是打飞机')}>{this.props.todos}</div>//这里可以看到促发alt的action来改变对应的store的数据和view的数据变化
</div>
)
}
} render(<Demo/>, document.querySelector('#app'))
alt.js 使用教程的更多相关文章
- 《Node.js核心技术教程》学习笔记
<Node.js核心技术教程>TOC \o "1-3" \h \z \u 1.章模块化编程 2019.2.19 13:30' PAGEREF _101 \h 1 08D ...
- js模版引擎handlebars.js实用教程——目录
写在开头的话: 阅读本文需要了解基本的Handlebars.js概念,本文并不是Handlebars.js基础教程,而是注重于实际应用,为读者阐述使用过程中可能会遇到的一些问题. 实际上,小菜写这篇文 ...
- 24个很赞的 Node.js 免费教程和在线指南
JavaScript 最初是用来创建动态网站效果的的前端语言.而如今,这门脚本语言也可以用作后端开发,用于搭建 Web 服务器,开发接口,甚至创建博客.在下面这个列表中包括24个 Node.js 教程 ...
- Google Analytics统计代码GA.JS中文教程
2010-12-06 11:07:08| 分类: java编程 | 标签:google analytics ga js 代码 |举报|字号 订阅 Google Analytics ...
- 【入门必备】最佳的 Node.js 学习教程和资料书籍
Web 开发人员对 Node.js 的关注日益增多,更多的公司和开发者开始尝试使用 Node.js 来实现一些对实时性要求高,I/O密集型的业务.这篇文章中,我们整理了一批优秀的资源,你可以得到所有你 ...
- 【特别推荐】Node.js 入门教程和学习资源汇总
这篇文章与大家分享一批很有用的 Node.js 入门教程和学习资源.Node 是一个服务器端的 JavaScript 解释器,它将改变服务器应该如何工作的概念.它的目标是帮助程序员构建高度可伸缩的应用 ...
- Alt.js的入门
一.什么是Alt altJS是基于Flux使用Javascript应用来管理数据的类库,它简化了flux的store.actions.dispatcher. 关于Flux,以下链接都做了很好的诠释 h ...
- Node.js 入门教程和学习资源汇总
这篇文章与大家分享一批很有用的 Node.js 入门教程和学习资源.Node 是一个服务器端的 JavaScript 解释器,它将改变服务器应该如何工作的概念.它的目标是帮助程序员构建高度可伸缩的应用 ...
- 【D3.V3.js系列教程】--(十四)有路径的文字
[D3.V3.js系列教程]--(十四)有路径的文字 1. 在 svg 中插入一個 text // 在 body 中插入一個 svg var svg = d3.select('body').appen ...
随机推荐
- Linux或树莓派3——挂载U盘、移动硬盘并设置rwx权限
话说最近在树莓派上搭建了一个owncloud,因为树莓派的存储空间有限,就插了个16G的U盘,然后设置成开机自动挂载.这里稍微注意一下的是U盘的格式最好不要NTFS,因为一般情况下NTFS格式的文件系 ...
- 枚举 Java Enumeration接口
Enumation 定义了一些方法,通过这些方法可以枚举对象集合中的元素 如: boolean hasMoreElements() 测试此枚举是否包含更多的元素 object nextElement( ...
- ML(1)——机器学习简述
简述 机器学习是人工智能的一种实现方式:深度学习是一种实现机器学习的技术,或者说是一种特殊的机器学习方法,可以说广义上的机器学习也包括了深度学习,三者的关系如下图所示: 从判别垃圾邮件到无人驾驶技术, ...
- js过滤输入的emoji表情
因为emoji表情是Unicode编码, 在某些流浪器上会显示乱码, 有的数据库字节不够也无法存储, 网上有很多解决此类问题的办法, 最简单的莫过于将emoji表情替换成文本, 比如 [表情][表情] ...
- Linux 下的三种时间介绍
Linux 下的三种时间介绍: Access Time:简写为atime,表示文件访问的时间,当文件内容被访问时,更新atime时间 Modify Time:简写为mtime,表示文件内容修改的时间, ...
- 根据IP和端口号异步短时间判断服务器是否链接
/// <summary> /// 短时间判断是否可以连接 /// </summary> /// <param name="ipe"></ ...
- 基于zookeeper的activemq的主从集群配置
项目,要用到消息队列,这里采用activemq,相对使用简单点.这里重点是环境部署. 0. 服务器环境 RedHat710.90.7.210.90.7.1010.90.2.102 1. 下载安装zoo ...
- 利用VMware虚拟机安装CentOS7
CentOS7镜像下载:http://isoredirect.centos.org/centos/7/isos/x86_64/CentOS-7-x86_64-DVD-1804.iso VMware虚拟 ...
- 安装包制作工具 SetupFactory 详解
Setup Factory 是一个强大的安装程序制作工具.提供了安装制作向导界面,即使你对安装制作不了解,也可以生成专业性质的安装程序.可建立快捷方式,也可直接在 Windows 系统的注册表加入内容 ...
- bzoj4948: World Final2017 A
求简单多边形内的最长线段长度 显然存在一组最优解,使其所在直线经过多边形的两个端点,枚举这两个端点,求出直线和多边形的有效交点,从而得出直线有哪些部分在多边形内(含边界). 由于多边形的一些边可能与直 ...