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. 一次单片机 SFR 页引发的“事故”

    一次单片机 SFR 页引发的"事故" 现象 需要使用单片机的 ADC 功能,在对 ADC 初始化后,根据内部分的 IVREN 计算出 VDD 的电压值 . 在读取时一直显示 ADC ...

  2. kafka_2.11-0.8.2.1+java 生产消费程序demo示例

      Kafka学习8_kafka java 生产消费程序demo示例 kafka是吞吐量巨大的一个消息系统,它是用scala写的,和普通的消息的生产消费还有所不同,写了个demo程序供大家参考.kaf ...

  3. 基于tensorflow的MNIST手写识别

    这个例子,是学习tensorflow的人员通常会用到的,也是基本的学习曲线中的一环.我也是! 这个例子很简单,这里,就是简单的说下,不同的tensorflow版本,相关的接口函数,可能会有不一样哟.在 ...

  4. Delphi 与 C/C++ 数据类型对照表

    Delphi 数据类型 C/C++ ShorInt 8位有符号整数 char Byte 8位无符号整数 BYTE,unsigned short SmallInt 16位有符号整数 short Word ...

  5. TeamViewer 的早期版本下载

    对于10及上以的:https://www.teamviewer.com/zhcn/download/previous-versions/ 5~9的版本下载:https://community.team ...

  6. 代码从Polyline读取到的坐标和属性对话框显示的不一样?

    属性窗口中查询的第一个点坐标: 程序输出的各个点坐标: 差这么多? 原来是坐标系的问题,程序查询到的是世界坐标,属性窗口中是当前ucs坐标 Document doc = Application.Doc ...

  7. synchronized基础

    synchronized 例子 例1,没有同步的时候运行同一个对象的同一个方法的结果: public class TestSyn { public void showMsg() { try { for ...

  8. 卡尔曼滤波器实例:跟踪自由落体运动:设计与Matlab实现

    [首发:cnblogs    作者:byeyear    Email:byeyear@hotmail.com] 本文所用实例来自于以下书籍: Fundamentals of Kalman Filter ...

  9. java反射以及动态代理的学习

    java反射学习 1)字节码文件的三种获取方式 ①:Object类的getClass()方法:对象.getClass() ②:数据类型的静态的class属性:类名.class ③:通过Class类的静 ...

  10. Java学习——方法中传递参数分简单类型与复杂类型(引用类型)编程计算100+98+96+。。。+4+2+1的值,用递归方法实现

    package hello; public class digui { public static void main(String[] args) { // TODO Auto-generated ...