store

行为说明

1. store 基于 mobx 响应式数据，建议使用较新版本。
2. 当 store 数据变化时，Annil 会通过深度比较判断是否触发 setData。
3. 修改 store 应通过 store 内部方法进行。
4. 若数据变化不符合预期，应优先检查数据是否为响应式对象。
5. 组件实例建立前后的同步问题由内部机制处理，避免二次进入页面时状态不同步。

示例

import {
  CustomComponent,
  DefineComponent,
  type ExtendComponentType,
  RootComponent,
} from "annil";
import type { $TopNav } from "../../components/topNav/topNav";
import { userStore } from "../../moudule/userStore";

type $TopNavExtend = ExtendComponentType<
  $TopNav,
  { events: { topNav_tap: null } }
>;

const rootComponent = RootComponent()({
  isPage: true,
  store: {
    userName: () => userStore.name,
  },
  watch: {
    userName(newVal, oldVal) {
      console.log("userName changed", newVal, oldVal);
    },
  },
  lifetimes: {
    attached() {
      userStore.changeName("zhang");
      userStore.changeAge(20);
    },
  },
});

type Root = typeof rootComponent;

const topNav = CustomComponent<Root, $TopNavExtend>()({
  data: {
    topNav_title: "store",
    topNav_twTitle: " primary",
  },
  events: {
    topNav_tap() {
      wx.navigateBack();
    },
  },
});

const profileStore = CustomComponent<
  Root,
  { properties: { profile_age: number } }
>()({
  store: {
    profile_age: () => userStore.age,
  },
  watch: {
    profile_age(newVal, oldVal) {
      console.log("profile_age changed", newVal, oldVal);
    },
  },
});

const store = DefineComponent({
  path: "/pages/store/store",
  rootComponent,
  subComponents: [topNav, profileStore],
});

export type $Store = typeof store;

参考

• 建议与 API 总览 配合阅读