1
收藏
评论

从 omix 拆解自己需要的功能

从 omix 拆解出 store 的能力,用于跨页面同步更新 data 中数据。

omix 简介

omix 主要提供了以下几种能力

像 vue 一样修改 data、创建函数属性

// 修改 oData,页面中的 data 也会实时修改
this.oData.userName = 'jie'
data: {
  motto: 'Hello World',
  reverseMotto() {
    return this.motto.split('').reverse().join('')
  }
},

监听、触发自定义事件

可以定义全局的事件,在不同的页面,页面中的组件触发、监听事件。
能想到的适用场景:从列表页进入到详情页,在详情页修改列表页对应的项为已读。
mitt 来自开源库 mitt

const emitter = mitt()

// listen to an event
emitter.on('foo', e => console.log('foo', e) )

// listen to all events
emitter.on('*', (type, e) => console.log(type, e) )

// fire an event
emitter.emit('foo', { a: 'b' })

给页面中的组件注入上下文

// page
create.Page({
  //页面级别上下文,跨页面不共享
  context: {
    abc: '公共数据从页面注入到页面的所有组件'
    //事件发送和监听器,或者 create.mitt()
    emitter: create.emitter
  },
}

// component
create.Component({
  ready: function () {
    //这里可以获取组件所属页面注入的 store
    console.log(this.context)
    //触发事件
    this.context.emitter.emit('foo', { a: 'b' })
  },
})

定义 store 跨页面共享数据

import create from '../../utils/create'
import store from '../../store'

create(store, {
  onLoad: function () {
    // 所有 页面的 store 都会更新
    this.store.data.logs = (wx.getStorageSync('logs') 
  },
})

拆解

暂时只打算用 store 和 mitt,mitt 直接拿来用就行,所以依照 omix 作者的实现方式仿写了一下 store。

store 原理

原理挺简单的,就是修改 onLoad 把每个页面的实例保存起来,修改 store 就让保存的页面实例调用 setData 同步更新数据

仿写代码

使用

先定义 store

export default {
  data: {
    test: 'haha',
  },

  onChange (data) {
    console.log(data);
  },
}
// 使用
import store from '../store'
import customPage from '../utils/customPage'

customPage({
  store,

  data: {
    
  },

  onLoad () {
    // 多个页面同步更新
    this.store.setData({
      test: 'lala',
    })
  },
})

源代码地址

https://github.com/jinglen/wx-mini-store/blob/master/utils/customPage.js

收获

  • 原来微信会把 Page(options) 中的 options 克隆一下
最后一次编辑于  03-16  (未经腾讯允许,不得转载)
复制链接赞 1收藏投诉评论

1 个评论

  • 陈式坚
    陈式坚
    03-18

    顶!

    03-18
    赞同
    回复