使用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的支持》二維碼
  • 微信打賞
  • 支付寶打賞

已有48條評論

  1. 游客 951

    雖然看不太懂,但感覺很厲害的樣子

    2019-04-10 15:17 回復
  2. 今日頭條新聞

    文章不錯非常喜歡

    2019-04-08 00:03 回復
  3. 嘿嗨圖

    技術博客都是不更新的

    2019-04-03 00:37 回復
    • 樸人博客

      不是不更新,最近一年忙于各種事,沒顧上更新

      2019-04-12 13:04 回復
  4. mamayi

    一如既往的表示支持!

    2019-03-19 08:53 回復
  5. 游客 994

    文章寫得很好,拜訪站長、支持站長!

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

      頂一下!!!不錯哦!!

      2019-03-18 14:22 回復
  6. 游客 332

    很久沒有編程了,新年快樂

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

      支持這里~~~~~~~~

      2019-03-12 14:31 回復
  7. 薇肯皮膚管理

    還行吧,就是響應速度有點慢

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

      支持這里~~~~~~~~

      2019-01-28 00:00 回復
  8. 965ys

    你好,博主換友鏈不,
    965影視,www.965ys.net

    2018-12-24 11:06 回復
  9. 游客 649

    不錯

    2018-12-05 09:57 回復
  10. 搜程快排系統

    看懂了,非常不錯的

    2018-11-28 14:11 回復
  11. 游客 438

    解答的詳細

    2018-10-30 17:12 回復
    • 跨境電商導航

      總結得太好了!大長見識!

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

    文章模板確實不錯的

    2018-10-24 14:02 回復
  13. 游客 997

    哇 全是干貨

    2018-10-09 09:32 回復
  14. 頭條

    文章不錯非常喜歡

    2018-09-16 00:33 回復

(必填)

(必填)

(可選)

黑龙江22选5开奖