昨天构筑了 MIXIN 今儿是 minX

咱们做个 自己用的工具,不是框架. 好多细节都没考虑到
慢慢优化

-  其实这里有个问题  就是再混入 小程序 页面的时候
-  每个页面是相对独立的 多页面应用
-  所以 每个data也是独立的 
  • 那么要修改页面上的值 需要setData
  • 这时候 同步这个工作 就只能放到全局变量 和 onshow中去做了
  • 暂时没有想出更好的办法,

上面的使用 已经贴到了上一篇了

// 当修改了 当前$store中的数据 页面上的数据 也会有更新
// 要将这个 数据 混入到Page的data中
// 需要通过commit修改state中的value 
// 要定义 底层, 而不是使用层
/**
 * 实现类似于vuex 的功能
 * store 中定义 数据 => 页面中 可以使用 store中的数据 通过$store.state.xxx 
 * 当store中的数据 通过commit 改变 =>  就会影响到页面上的 数据 一起改变
 */
import proxy from '../defineProperty';

class Store {
  constructor(app) {
    this.app = app;
  }

  init(page) {
    this.page = page;
    proxy.proxyInit(this.state);
    Object.keys(this.state).forEach(key => {
      if (key === 'watch') return;
      this.state.watch(key, (value) => {
        this.page.setData({
          [`$store.state.${key}`]: value
        })
      })
    })
  }

  state = {
    platform: wx.getSystemInfoSync().platform,
    name:1
  }

  _keyList = (() => {
    return Object.keys(this.state)
  })();

  #mutation = {
    // 修改了state中的值以后
    setNum: (value) => {
      this.state['num'] = value;
    }
  }

  commit(methodKey, val) {
    if (typeof this.#mutation[methodKey] !== 'function') {
      console.warn('store.methodKey is not function');
      return;
    }
    this.#mutation[methodKey](val);
  }
}

export default Store;

/**
 * 将State中的数据 混入到 this.data中
 * @param {Object} minxParams 
 */
function minx(minxParams) {
  this.data = Object.assign({}, {
    $store: {
      state: minxParams['state']
    }
  }, this.data);
  return this
}

export default minx

然后使用的时候

methods{
    onClick(){ app.globalData.store.commit( methodsName,value ) }
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容