前言

有时候，我们需要小程序的A页面直接触发B页面的method，通常我们的做法是利用状态管理插件来管理状态，A页面修改状态，B页面监听状态，也就是“发布-订阅”大法。这种大法确实是主流的做法，今天介绍个非主流的做法：PageModel大法。

原理

原理很简单，每开启一个Page，我们都用全局变量收集一次PageModel，最后形成一个PageModels对象，每个键名就是路由路径，每个值就是该页面的PageModel。因为每个Page的methods都被包含在PageModel里，这样我们直接执行PageModel.method即可实现页面没在前台显示的时候，它的method就已经可以被执行了。

详解

我因为一直在用mpvue 2开发，所以就拿mpvue举例吧。

app的main.js：

给Vue的原型新增一个属性，这样将来我们用this.$pageModels就可以引用这个属性。

Vue.prototype.$pageModels = {}

Page A：

一、在onLoad中书写：

this.$pageModels[this.$root.$mp.page.route] ? null : this.$pageModels[this.$root.$mp.page.route] = this

this.$root.$mp.page.route这个是mpvue官方提供的获取当前路由的方法。如果不用mpvue那就更简单了，具体查小程序手册，这里不多说。

赋值号后面的this是Vue克隆出的当前页面的pageModel。你可以打印一下看看它。

二、书写data和methods：

  data () {
    return {
      a: 0
    }
  },
  methods: {
    setA (v) {
      setTimeout(() => {
        this.a = v
      }, 5000)
    }
  }

就是一个简单的属性和设置该属性的方法。一点特别的都没有。

三、书写template：

<template>
  <div>
    <a href="/pages/b/main">前往B</a>
    <div>a的值为 {{a}}</div>
  </div>
</template>

Page B：

一、在onLoad中书写：

this.$pageModels[this.$root.$mp.page.route] ? null : this.$pageModels[this.$root.$mp.page.route] = this

看到了？跟Page A一模一样，一字不改。

二、弄一个改变A页面a属性的方法：

  methods: {
    changeA_a () {
      this.$pageModels['pages/a/main'].setA(1000)
    }
  }

三、template写法：

<template>
  <div>
    <a href="/pages/a/main">前往A页</a>
    <div @click="changeA_a">直接执行A页的方法</div>
  </div>
</template>

效果

1. 打开小程序，先进入A页面，收集A页面的PageModel。
2. 进入B页面，收集B页面的PageModel。（其实，只有当你需要执行B页面的方法的时候，才需要收集B页面的PageModel，所以，不要做无用的收集，要按需求收集。）
3. 点击B页面的“直接执行A页的方法”按钮，这样，在不打开A页面的前提下，A页面的方法就被执行了！
4. 等5秒，再返回A页面，你可以立即看到，A的a已经从0变成1000，并不是在A页面停留5秒才变。

就这么简单！

PageModel大法优势

1. 无需借助任何库和插件。没有任何学习成本。
2. 无需“发布-订阅”。
3. 语义非常清晰，一目了然无歧义。从代码看，this.$pageModels['pages/a/main'].setA(1000)，其中的this.$pageModels['pages/a/main']毫无疑问就是A页面的PageModel的引用，setA(1000)也是执行A页面含有的方法，没有任何歧义。

注意事项

1. 收集PageModel依赖于每个Page的onLoad，所以，从未打开过的Page是不会被收集的，也没法被收集。
2. 弄清楚目标页面的route，也就是'pages/a/main'，不要写错了。

适用场合

适用于所谓“面向过程”的操作，且与状态弱相关的操作。

比如：在B页面的某操作，与A页面的某操作有相关性，只希望B页面的某操作执行完成后，执行一次A页面的某操作。

如果是“发布 - 订阅”模式，那么B页面需要修改状态插件的某个state，然后A页面需要监听state的变化，当A页面监听到变化，就执行A页面的操作。这样的问题是：

这是一个单对单的发布订阅，用发布订阅模式就比较浪费，因为这个state只有一个作用，就是只为了从B页面向A页面传递状态。单对单的状态传递，倒不如面向过程，执行完B页面的操作，直接去执行A页面的操作就好了。

PageModel大法能否取代状态管理工具？

不能！

PageModel大法是直接操作特定页面的特定方法，可以说是一种违反“MVVM”模式的大法，可以说是Model与Model直接通信。这种方法在它的适用场合是优于MVVM模式的，但是显然页面间通信并不全是这么简单的。

所以，我建议只在PageModel大法适用的场合适用它。