mpvue 开发插件

前言

• 刚踏入mpvue这个坑
• 有些属性还是和vue不一样的，使用一些插件来方便开发

开始

wxapp-api-interceptors 微信api拦截器 （请求拦截axios）

• 这个插件是用来拦截微信的api的使得运用可以像axios一样使用
• https://www.npmjs.com/package/wxapp-api-interceptors

1. 安装

   $ npm install wxapp-api-interceptors --save

2. mpvue引用

   import wxApiInterceptors from 'wxapp-api-interceptors';
    
   wxApiInterceptors(); // 必须在调用小程序api之前调用

3. 设置请求拦截处理(返回拦截也是可以的)

   wxApiInterceptors({
       request: {
           request(params) {
               const host = 'https://test.com'
               if (!/^(http|\/\/)/.test(params.url)) {
                   params.url = host + params.url;
               }
               return params;
           },
       },
   });

vuex持久化存储

• 在项目开发时使用vuex在刷新后是不会存储的
• https://github.com/robinvdvleuten/vuex-persistedstate

1. 安装

   $ npm install --save vuex-persistedstate

2. 配置

   import { Store } from 'vuex'
   import createPersistedState from 'vuex-persistedstate'
   import * as Cookies from 'js-cookie'
   
   const store = new Store({
     // ...
     plugins: [
       createPersistedState({
         storage: {
           getItem: key => Cookies.get(key),
           // Please see https://github.com/js-cookie/js-cookie#json, on how to handle JSON.
           setItem: (key, value) =>
             Cookies.set(key, value, { expires: 3, secure: true }),
           removeItem: key => Cookies.remove(key),
         },
       }),
     ],
   })