Binding.scala使用教程4--全局状态管理

全局状态管理

• 这个状态管理在Vue中需要安装Vuex, React中需要安装Redux
• 这些前端框架需要额外的框架来管理全局状态，学习起来很麻烦，还不好用，然而在Binding.scala中只需要会用Var和Vars这两个集合类就可以了，他们内置了很多方法，重要的是它可以做数据绑定。
• 用scala写起来十分精炼，不会感觉有多余代码，不信你看

效果图

组件1 做加法

组件2 做显示

他们俩共用一份数据 Store.count

目录结构

环境搭建查看 Binding.scala使用教程1–环境搭建

MainApp

import scala.scalajs.js.JSApp
import com.thoughtworks.binding.{Binding, dom}
import org.scalajs.dom.document

object MainApp extends JSApp
{
  def main(): Unit =
  {
    dom.render(document.body, View.render)
  }
}

View

import com.thoughtworks.binding.dom

object View
{

  @dom
  def render =
  {
    <div>
   {new Component1().render.bind}
   {new Component2().render.bind}
    </div>
  }
}

Store

import com.thoughtworks.binding.Binding.Var

object Store
{
  val count=Var(0)
}

Component1

import com.thoughtworks.binding.dom
import org.scalajs.dom.raw.Event

class Component1
{
  val addCount =
  {
    event: Event =>
    Store.count.value+=1
  }
  @dom
  def render =
  {
    <div>
     <p>我是component1</p>
      <button onclick={addCount}>addCount</button>
    </div>
  }
}

Component2

import com.thoughtworks.binding.dom

class Component2
{
  @dom
  def render =
  {
    <div>
      <p>我是Componet2</p>
      {Store.count.bind.toString}
    </div>
  }
}