zoukankan      html  css  js  c++  java
  • 在小程序中使用状态管理mobx

    在小程序中使用状态管理mobx

    使用mobx后,进入二级页面修改数据返回一级页面显示的数据跟着变

    先看效果

    控制台打印的数据

    以下是代码

    store.js

    // js/store.js
    // 手动安装时引入的路径
    import {configure, extendObservable} from "./mobx";
    
    // 设置可在任何地方修改
    configure({
      enforceActions: 'never',
    });
    
    let Store = function () {
      /*属性*/
      extendObservable(this, {
        // observable data
        todoText: 'aaa',
        // computed data
        get todoTextCount() {
          return this.todoText.length;
        }
      });
    
      /*方法*/
      // action
      this.changeTodoText = function (todoText) {
        this.todoText = todoText;
      }
    }
    
    module.exports.store = new Store

    test.js

    // pages/test/test.js
    import { autorun } from '../../js/mobx';
    import { store } from '../../js/store';
    
    Page({
      data: {
        todoText: store.todoText,
      },
      // your other code below
      onLoad: function (evt) {
        this._autorun();
        const _this = this;
        console.log('onLoad', evt);
        // this._autorun();
        store.changeTodoText('test.store.111');
        store.todoText = 'test.store.222';
      },
      _disposer: [],
      _autorun: function () {
        const _this = this;
        _this._disposer.push(
          autorun(function () {
            console.log('autorun.todoText', _this.data, store);
            _this.setData({ todoText: store.todoText });
          })
        );
      },
      onUnload: function (evt) {
       this._disposer.map(function (x) { x() });
    this._disposer.length = 0; }, onJumpAaa: function (evt) { tt.navigateTo({ url: '/pages/aaa/aaa' // 指定页面的url }); } })

    aaa.js

    // pages/aaa/aaa.js
    import { autorun } from "../../js/mobx";
    import { store } from "../../js/store";
    
    Page({
      data: {
        todoText: store.todoText,
      },
      // your other code below
      onLoad: function (evt) {
        this._autorun();
        const _this = this;
        console.log('onLoad', evt);
        store.changeTodoText('aaa.store.111');
        store.todoText = 'aaa.store.222';
      },
      _disposer: [],
      _autorun: function () {
        const _this = this;
        _this._disposer.push(
          autorun(function () {
            console.log('autorun.todoText', _this.data, store);
            _this.setData({ todoText: store.todoText });
          })
        );
      },
      onUnload: function (evt) {
       this._disposer.map(function (x) { x() });
    this._disposer.length = 0; }, })

    本文链接:

    https://www.cnblogs.com/stumpx/p/13159450.html

  • 相关阅读:
    AES对称加密和解密
    Akka并发编程框架 -概念模型(Akka.net或者Orleans)
    .net经典书籍
    计算机专业经典著作(转载)
    windows创建定时任务执行python脚本
    数据库中为什么不推荐使用外键约束(转载)
    《SQL Server性能调优实战》知识点汇总
    数据库索引知识汇总
    ASP.NET常见异常处理示例
    MVC的HTTP请求处理过程(IIS应用程序池、CLR线程池)
  • 原文地址:https://www.cnblogs.com/stumpx/p/13159450.html
Copyright © 2011-2022 走看看