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

已有30条评论

  1. 游客 997

    哇 全是干货

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

    文章不错非常喜欢

    2018-09-16 00:33 回复

(必填)

(必填)

(可选)