使用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) }
- 固定链接:https://www.poorren.com/mpvue-mini-program-vuex-router
- 文章标签:mpvue,store,vue,vuex
- 扫二维码:使用mpvue开发小程序——vuex、router的支持
- 版权所有:除"转载分享"分类外,未经注明,均为原创、整理,转载请注明出处。
谢谢,用到了~~~~~~~~~~~~~~~~~~~~
以致于我们vue中常用
以致于我们vue中常用vuex、router都支持有限,以致于我们vue中常用vuex、router都支持有限,
以致于我们vue中常用vuex、router都支持有限,
,既然这个问题不存在
今年全国各城市都倡导就地过年.
不错很好,就是速度不是很快
虽然看不太懂,但感觉很厉害的样子
文章不错非常喜欢
技术博客都是不更新的
不是不更新,最近一年忙于各种事,没顾上更新
一如既往的表示支持!
文章写得很好,拜访站长、支持站长!
顶一下!!!不错哦!!
很久没有编程了,新年快乐
支持这里~~~~~~~~
还行吧,就是响应速度有点慢
支持这里~~~~~~~~
你好,博主换友链不,
965影视,www.965ys.net
不换这种了
不错
看懂了,非常不错的
解答的详细
总结得太好了!大长见识!
文章模板确实不错的
哇 全是干货
文章不错非常喜欢