使用mpvue开发小程序——vuex、router的支持打赏

继续前面话题,mpvue提供了vue的语法编译为小程序的能力,但语法上局限实在有点多。

当然,其根因还是小程序官方的限制,以致于我们vue中常用vuex、router都支持有限,截止发文时间,mpvue对vuex全局store的支持也有所提升,目前可以说基本满足需求,这里不再赘述。

使用上,vuex和以往类似,不同的是,小程序以多页形式渲染,故每个页面都需要创建vue实例并引入相应的store模块,入口配置大概如下:

import Vue from 'vue';
import Vuex from 'vuex';
import store from './store';
import App from './index';

Vue.use(Vuex);

const app = new Vue({
    ...App,
    store
});

app.$mount();

之后你就可以正常使用vuex的特性了,至于是否采用小程序的本地存储之类的,可以考虑使用vuex的钩子进行。

至于router,目前mpvue暂不支持,我在尝试后发现,插件注入什么的都没问题,唯独在组件内调用this.$router.push/replace时,得到的结果不很理想。

试想,axios可以写适配器,vue-router是不是也可以呢?当然,比如官方实现了hash、history和abstract三种模式,理论上我们可以加一种小程序的模式,但是官方似乎并没预留合适参数给我们用,不过导航守护的钩子,我们倒是可以稍加利用,增加beforeEach,发现每次调用push/replace,得到的结果是from为目标页面,to一直为“/”,这倒不影响我们使用,小程序端尝试编写钩子,调用wx.navigateTo({ url: from.path })或者……

等等,这里遗漏一个问题,导航守护并不知道是push或是replace,似乎达不到效果?既然这样,我们何不抛开庞大的vue-router,直接自己编写vue插件,分别注入$route、$router?

自己实现起来,总是那么得心应手!

import Vue from 'vue';
import App from './index';

Object.defineProperty(Vue.prototype, '$route', {
    get() {
        return {
            path: '...'
        }
    }
})

Object.defineProperty(Vue.prototype, '$router', {
    get() {
        return {
            push() {
            },
            replace() {
            },
            go() {
            },
            back() {
            }
        }
    }
})

const app = new Vue({
    ...App
});

app.$mount();

问题迎刃而解!

到这里有人可能会问,为什么不直接采用小程序的api做跳转呢?谁让我们是要做一份代码多端编译呢!

2018-04-04更新

经小伙伴进一步探索,发现前面所述问题

发现每次调用push/replace,得到的结果是from为目标页面,to一直为“/”

是我自己写demo时候漏写了next,且from、to参数顺序写错,既然这个问题不存在,那么,我们重新VueRouter原型方法的replace、back以及go,在调用前增加额外识别参数,比如:

const originReplace = VueRouter.prototype.replace;
const originPush = VueRouter.prototype.push;
const originGo = VueRouter.prototype.go;
const originBack = VueRouter.prototype.back;

VueRouter.prototype.replace = function replace(...args) {
    // TODO
    originReplace.apply(this, args)
}
VueRouter.prototype.push = function push(...args) {
    // TODO
    originPush.apply(this, args)
}
VueRouter.prototype.go = function go(...args) {
    // TODO
    originGo.apply(this, args)
}
VueRouter.prototype.back = function back(...args) {
    // TODO
    originBack.apply(this, args)
}
使用mpvue开发小程序——vuex、router的支持
文章《使用mpvue开发小程序——vuex、router的支持》二维码
  • 微信打赏
  • 支付宝打赏

已有18条评论

  1. 北海格力空调售后维修点

    遇到这个问题好几天了,终于解决了,谢谢大神

    2018-07-04 18:47 回复
  2. 果玩加州西梅果树苗

    看起来非常厉害的样子,值得学习的地方很多啊

    2018-07-03 15:58 回复
  3. 周松松博客

    感谢分享
    欢迎加入松松博客交流群,群聊号码:571334199

    2018-06-22 20:07 回复
  4. 阿里巴巴下拉

    这个功能还是不错的了

    2018-06-19 15:58 回复
  5. 今天头条

    文章不错非常喜欢

    2018-06-11 02:20 回复
  6. 世界杯竞猜

    mpvue是很好用的。

    2018-06-07 16:14 回复
  7. 游客 98

    文章很好值得一看

    2018-05-30 08:40 回复
  8. 福利老幺

    虽然不懂这个,但还是过来支持一下。

    2018-05-24 12:39 回复
  9. bt110

    谢谢博主热心的分享好东西,支持下,欢迎回访下我的网站,看能否换个友链

    2018-05-23 17:25 回复
  10. 游客 148

    谢谢分享 刚好遇到这个问题!

    2018-05-05 17:00 回复
  11. 游客 914

    用这个开发工具确实方便很多了

    2018-04-24 15:36 回复
  12. 三代乐

    谢谢分享,长见识,回头试一下!

    2018-04-16 11:19 回复
  13. GEC环保币

    学习到了好知识!

    2018-04-14 09:49 回复
  14. 记忆力博客

    看到博主写了这么多代码,才知道搞程序者的辛苦。谢谢分享

    2018-04-10 07:59 回复
  15. 武胜

    有收获学习了。

    2018-04-03 08:52 回复
  16. 跨境电商教程

    感谢感谢!很有用的信息

    2018-04-01 02:11 回复

(必填)

(必填)

(可选)