Lib.rs

› 网页编程
#状态管理 #leptos #响应式 #同构 #网页 #网页框架 #框架

leptos_tea

leptos 的 Elm 架构

作者：Jose Quesada

10 个版本 (5 个破坏性更新)

0.6.0-rc12023 年 9 月 15 日
0.6.0-beta.12023 年 8 月 22 日
0.5.2 2023 年 6 月 30 日
0.4.0 2023 年 5 月 18 日
0.1.1 2023 年 3 月 29 日

#1874 in 网页编程

Download history 39/week @ 2024-03-31

每月下载量 88

MIT 许可证

16KB
174 行

leptos 的 Elm 架构。

这个包是 leptos 中状态管理的一种特定策略。它遵循 Elm 架构，但并非严格遵循，这允许与其它状态管理方法混合使用。

首先，让我们看一个例子。

示例

use leptos::*;
use leptos_tea::Cmd;

#[derive(Default, leptos_tea::Model)]
struct CounterModel {
  counter: usize,
}

#[derive(Default)]
enum Msg {
  #[default]
  Init,
  Increment,
  Decrement,
}

fn update(model: UpdateCounterModel, msg: Msg, _: Cmd<Msg>) {
  match msg {
    Msg::Increment => model.counter.update(|c| *c += 1),
    Msg::Decrement => model.counter.update(|c| *c -= 1),
    Msg::Init => {}
  }
}

#[component]
fn Counter(cx: Scope) -> impl IntoView {
  let (model, msg_dispatcher) = CounterModel::default().init(cx, update);

  view! { cx,
    <h1>{model.counter}</h1>
   <button on:click=move |_| msg_dispatcher.dispatch(Msg::Decrement)>"-"</button>
   <button on:click=move |_| msg_dispatcher.dispatch(Msg::Increment)>"+"</button>
  }
}

在上面的例子中，我们使用 leptos_tea::Model 注解 CounterModel，这将导出一些重要内容

# use leptos::*;
# use leptos_tea::Cmd;

// Original struct, stays as-is
struct CounterModel {
  counter: usize,
}

// Model passed to the update function
struct UpdateCounterModel {
  counter: RwSignal<bool>,
}

// model passed to the component when you call `.init()`
struct ViewCounterModel {
  counter: ReadSignal<bool>,
}

impl CounterModel {
  // Initializes everything and starts listening for messages.
  // Msg::default() will be send to the update function when
  // called
  fn init<Msg: Default + 'static>(
    self,
    cx: Scope,
    update_fn: impl Fn(UpdateCounterModel, Msg, Cmd<Msg>),
  ) -> (ViewCounterModel, SignalSetter<Msg>) {
    /* ... */
# todo!()
  }
}

首先，你需要创建你的 CounterModel，无论你如何创建。在这个例子中，我们使用 Default。然后你调用 .init()，这将返回一个包含只读模型以及一个 MsgDispatcher 的元组，它允许你在 nightly 上执行 msg_dispatcher(Msg::Blah)，或在 stable 上执行 msg_dispatcher.dispatch(Msg::Blah)。

这就是这个包和状态管理方法的工作方式。

模型嵌套

模型可以像这样嵌套在一起

#[derive(leptos_tea::Model)]
struct Model {
  #[model]
  inner_model: InnerModel,
}

#[derive(leptos_tea::Model)]
struct InnerModel(/* ... */);

限制

leptos_tea::Model 目前只支持元组和字段结构体。枚举支持即将推出。

依赖

~4–7MB
~126K SLoC