使用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的支持》二维码
  • 微信打赏
  • 支付宝打赏

已有55条评论

  1. 金牌卖家

    谢谢,用到了~~~~~~~~~~~~~~~~~~~~

    2021-07-19 15:09 回复
  2. 游客 195

    以致于我们vue中常用

    2021-03-02 16:27 回复
  3. 游客 619

    以致于我们vue中常用vuex、router都支持有限,以致于我们vue中常用vuex、router都支持有限,

    2021-03-02 16:26 回复
  4. 游客 671

    以致于我们vue中常用vuex、router都支持有限,

    2021-03-02 16:25 回复
  5. 游客 457

    ,既然这个问题不存在

    2021-03-02 16:24 回复
  6. 游客 692

    今年全国各城市都倡导就地过年.

    2021-03-02 16:24 回复
  7. 游客 695

    不错很好,就是速度不是很快

    2020-05-26 15:44 回复
  8. 游客 951

    虽然看不太懂,但感觉很厉害的样子

    2019-04-10 15:17 回复
  9. 今日头条新闻

    文章不错非常喜欢

    2019-04-08 00:03 回复
  10. 嘿嗨图

    技术博客都是不更新的

    2019-04-03 00:37 回复
    • 朴人博客

      不是不更新,最近一年忙于各种事,没顾上更新

      2019-04-12 13:04 回复
  11. mamayi

    一如既往的表示支持!

    2019-03-19 08:53 回复
  12. 游客 994

    文章写得很好,拜访站长、支持站长!

    2019-03-17 15:21 回复
    • 游客 448

      顶一下!!!不错哦!!

      2019-03-18 14:22 回复
  13. 游客 332

    很久没有编程了,新年快乐

    2019-02-17 22:49 回复
    • 游客 906

      支持这里~~~~~~~~

      2019-03-12 14:31 回复
  14. 薇肯皮肤管理

    还行吧,就是响应速度有点慢

    2019-01-11 14:11 回复
    • 游客 779

      支持这里~~~~~~~~

      2019-01-28 00:00 回复
  15. 965ys

    你好,博主换友链不,
    965影视,www.965ys.net

    2018-12-24 11:06 回复
  16. 游客 649

    不错

    2018-12-05 09:57 回复
  17. 搜程快排系统

    看懂了,非常不错的

    2018-11-28 14:11 回复
  18. 游客 438

    解答的详细

    2018-10-30 17:12 回复
    • 跨境电商导航

      总结得太好了!大长见识!

      2018-11-12 03:45 回复
  19. 游客 567

    文章模板确实不错的

    2018-10-24 14:02 回复
  20. 游客 997

    哇 全是干货

    2018-10-09 09:32 回复
  21. 头条

    文章不错非常喜欢

    2018-09-16 00:33 回复

(必填)

(必填)

(可选)