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 使用教程的更多相关文章

  1. 《Node.js核心技术教程》学习笔记

    <Node.js核心技术教程>TOC \o "1-3" \h \z \u 1.章模块化编程 2019.2.19 13:30' PAGEREF _101 \h 1 08D ...

  2. js模版引擎handlebars.js实用教程——目录

    写在开头的话: 阅读本文需要了解基本的Handlebars.js概念,本文并不是Handlebars.js基础教程,而是注重于实际应用,为读者阐述使用过程中可能会遇到的一些问题. 实际上,小菜写这篇文 ...

  3. 24个很赞的 Node.js 免费教程和在线指南

    JavaScript 最初是用来创建动态网站效果的的前端语言.而如今,这门脚本语言也可以用作后端开发,用于搭建 Web 服务器,开发接口,甚至创建博客.在下面这个列表中包括24个 Node.js 教程 ...

  4. Google Analytics统计代码GA.JS中文教程

    2010-12-06 11:07:08|  分类: java编程 |  标签:google  analytics  ga  js  代码  |举报|字号 订阅     Google Analytics ...

  5. 【入门必备】最佳的 Node.js 学习教程和资料书籍

    Web 开发人员对 Node.js 的关注日益增多,更多的公司和开发者开始尝试使用 Node.js 来实现一些对实时性要求高,I/O密集型的业务.这篇文章中,我们整理了一批优秀的资源,你可以得到所有你 ...

  6. 【特别推荐】Node.js 入门教程和学习资源汇总

    这篇文章与大家分享一批很有用的 Node.js 入门教程和学习资源.Node 是一个服务器端的 JavaScript 解释器,它将改变服务器应该如何工作的概念.它的目标是帮助程序员构建高度可伸缩的应用 ...

  7. Alt.js的入门

    一.什么是Alt altJS是基于Flux使用Javascript应用来管理数据的类库,它简化了flux的store.actions.dispatcher. 关于Flux,以下链接都做了很好的诠释 h ...

  8. Node.js 入门教程和学习资源汇总

    这篇文章与大家分享一批很有用的 Node.js 入门教程和学习资源.Node 是一个服务器端的 JavaScript 解释器,它将改变服务器应该如何工作的概念.它的目标是帮助程序员构建高度可伸缩的应用 ...

  9. 【D3.V3.js系列教程】--(十四)有路径的文字

    [D3.V3.js系列教程]--(十四)有路径的文字 1. 在 svg 中插入一個 text // 在 body 中插入一個 svg var svg = d3.select('body').appen ...

随机推荐

  1. Linux或树莓派3——挂载U盘、移动硬盘并设置rwx权限

    话说最近在树莓派上搭建了一个owncloud,因为树莓派的存储空间有限,就插了个16G的U盘,然后设置成开机自动挂载.这里稍微注意一下的是U盘的格式最好不要NTFS,因为一般情况下NTFS格式的文件系 ...

  2. 枚举 Java Enumeration接口

    Enumation 定义了一些方法,通过这些方法可以枚举对象集合中的元素 如: boolean hasMoreElements() 测试此枚举是否包含更多的元素 object nextElement( ...

  3. ML(1)——机器学习简述

    简述 机器学习是人工智能的一种实现方式:深度学习是一种实现机器学习的技术,或者说是一种特殊的机器学习方法,可以说广义上的机器学习也包括了深度学习,三者的关系如下图所示: 从判别垃圾邮件到无人驾驶技术, ...

  4. js过滤输入的emoji表情

    因为emoji表情是Unicode编码, 在某些流浪器上会显示乱码, 有的数据库字节不够也无法存储, 网上有很多解决此类问题的办法, 最简单的莫过于将emoji表情替换成文本, 比如 [表情][表情] ...

  5. Linux 下的三种时间介绍

    Linux 下的三种时间介绍: Access Time:简写为atime,表示文件访问的时间,当文件内容被访问时,更新atime时间 Modify Time:简写为mtime,表示文件内容修改的时间, ...

  6. 根据IP和端口号异步短时间判断服务器是否链接

    /// <summary> /// 短时间判断是否可以连接 /// </summary> /// <param name="ipe"></ ...

  7. 基于zookeeper的activemq的主从集群配置

    项目,要用到消息队列,这里采用activemq,相对使用简单点.这里重点是环境部署. 0. 服务器环境 RedHat710.90.7.210.90.7.1010.90.2.102 1. 下载安装zoo ...

  8. 利用VMware虚拟机安装CentOS7

    CentOS7镜像下载:http://isoredirect.centos.org/centos/7/isos/x86_64/CentOS-7-x86_64-DVD-1804.iso VMware虚拟 ...

  9. 安装包制作工具 SetupFactory 详解

    Setup Factory 是一个强大的安装程序制作工具.提供了安装制作向导界面,即使你对安装制作不了解,也可以生成专业性质的安装程序.可建立快捷方式,也可直接在 Windows 系统的注册表加入内容 ...

  10. bzoj4948: World Final2017 A

    求简单多边形内的最长线段长度 显然存在一组最优解,使其所在直线经过多边形的两个端点,枚举这两个端点,求出直线和多边形的有效交点,从而得出直线有哪些部分在多边形内(含边界). 由于多边形的一些边可能与直 ...