API参考

mpx和mpx-webpack-plugin中暴露出的api文档

createApp

  1. import mpx, {createApp} from '@mpxjs/core'
  2. mpx.createApp(object)
  3. createApp(object)

createPage

  1. import mpx, {createPage} from '@mpxjs/core'
  2. mpx.createPage(object)
  3. createPage(object)

createComponent

  1. import mpx, {createComponent} from '@mpxjs/core'
  2. mpx.createComponent(object)
  3. createComponent(object)

Page & Component 新增的实例方法

  • this.$watch (添加watch)
    • this.$watch(‘a.b’, (val, old) => {})
    • this.$watch(function() {return this.a + this.b}, (val, old) => {})
  • this.$updated (用于添加当前视图更新之后的回调函数)
    • this.$updated(callback)
  • this.$forceUpdate (用于强制同步进行setData)
    • this.$forceUpdate()
    • this.$forceUpdate(params) // params的数据会merge到this上已挂载的数据
    • this.$forceUpdate(callback)
    • this.$forceUpdate(params, callback)

createStore

  1. import mpx, {createStore} from '@mpxjs/core'
  2. const store1 = mpx.createStore({ ...options })
  3. const store2 = createStore({ ...options })
options选项

  • state

  • mutations

    • 类型: { [type: string]: Function }

      在 store 上注册 mutation，处理函数总是接受 state 作为第一个参数（如果定义在模块中，则为模块的局部状态），payload 作为第二个参数（可选）。

      详细介绍

  • actions

    • 类型: { [type: string]: Function }

      在 store 上注册 action。处理函数总是接受 context 作为第一个参数，payload 作为第二个参数（可选）。

      context 对象包含以下属性：

      1. {
      2.   state,      // 等同于 `store.state`
      3.   commit,     // 等同于 `store.commit`
      4.   dispatch,   // 等同于 `store.dispatch`
      5.   getters     // 等同于 `store.getters`
      6. }

      同时如果有第二个参数 payload 的话也能够接收。

      详细介绍

  • getters

    • 类型: { [key: string]: Function }

    在 store 上注册 getter，getter 方法接受以下参数：

    1.   state,     // 如果在模块中定义则为模块的局部状态
    2.   getters,   // 等同于 store.getters

    注册的 getter 暴露为 store.getters。

    详细介绍

  • modules

    • 类型: Object

      包含了子模块的对象，会被合并到 store，大概长这样：

      1. {
      2.   key: {
      3.     state,
      4.     mutations,
      5.     actions?,
      6.     getters?,
      7.     modules?
      8.   },
      9.   ...
      10. }

      与根模块的选项一样，每个模块也包含 state 和 mutations 选项。模块的状态使用 key 关联到 store 的根状态。模块的 mutation 和 getter 只会接收 module 的局部状态作为第一个参数，而不是根状态，并且模块 action 的 context.state 同样指向局部状态。

      详细介绍

  • deps

    • 类型: Object

      包含了当前store依赖的第三方store：

      1. {
      2.   store1: storeA,
      3.   store2: storeB
      4. }

      详细介绍

toPureObject

由于使用的mobx的响应式数据，所以业务拿到的数据可能是mobx响应式数据实例（包含了些其他属性），使用toPureObject可以将响应式的数据转化成纯js对象

  1. import {toPureObject} from '@mpxjs/core'
  2. const pureObject = toPureObject(object)

observable

用于创建响应式数据，属于mobx提供的能力

  1. import {observable} from '@mpxjs/core'
  2. // mpx.observable(...)
  3. const a = observable(object)

extendObservable

用于扩展响应式数据，属于mobx提供的能力, 主要用于添加新的可观察数据

  1. import {observable, extendObservable} from '@mpxjs/core'
  2. const a = observable(object)
  3. // mpx.extendObservable(...)
  4. const b = extendObservable(a, {newProp: 10})

watch(context, expr, handler)

用于观察数据从而触发相应操作

  • context 回调执行的上下文
  • expr 观察的表达式[String | Function]。可以是path字符串（取值将在context上进行查找），也可以是函数
  • handler 响应函数[Function | Object]。如果是对象，则handler.handler为回调函数，其他参数作为options，与组件的watch一致
  1. import mpx, {watch} from '@mpxjs/core'
  2. // mpx.watch(...)
  3. const a = observable({name: 1})
  4. watch(null, () => {
  5.   console.log(a.name)
  6.   return a.name
  7. }, (val) => {
  8.   console.log('update a.name', val)
  9. })
  10. a.name = 10

mpx.use

mpx.use用于安装外部扩展, 支持多参数，如果第二个参数是一个包含（prefix or postfix）的option，
那么将会对插件扩展的属性添加前缀或后缀（主要考虑插件开发者直接导出的属性可能存在同名问题，use时指定
前缀或后缀能在业务角度去处理这种情况）

  1. import mpx from '@mpxjs/core'
  2. import test from './test'
  3. mpx.use(test)
  4. mpx.use(test, {prefix: 'mpx'}, 'otherparams')

具体例子

mpx.mixin

用于注入mixin

  1. import mpx from '@mpxjs/core'
  2. mpx.mixin({
  3.   methods: {
  4.     $fetch: function(){}
  5.   }
  6. }, types)
types选项

types决定了mixin会注入到哪种实例上，app | page | component

  • String, ‘app’, ‘page’, ‘component’
  • Array, [‘app’, ‘page’, ‘component’]
  • 如果不传，默认为[‘app’, ‘page’, ‘component’]

Store 实例属性

  • state

    • 类型: Object

      根状态。

  • getters

    • 类型: Object

      暴露出注册的 getter。

Store 实例方法

  • commit(type: string, payload?: any, options?: Object) | commit(mutation: Object, options?: Object)

    提交 mutation。详细介绍

  • dispatch(type: string, payload?: any, options?: Object) | dispatch(action: Object, options?: Object)

    分发 action。返回一个Promise。详细介绍

  • mapState(map: Array<string> | Object): Object

    为组件创建计算属性以返回 store 中的状态。详细介绍

  • mapGetters(map: Array<string> | Object): Object

    为组件创建计算属性以返回 getter 的返回值。详细介绍

  • mapActions(map: Array<string> | Object): Object

    创建组件方法分发 action。详细介绍

  • mapMutations(map: Array<string> | Object): Object

    创建组件方法提交 mutation。详细介绍