Uniapp Frame

Install

import App from './App'
import { createFrame } from '@foreverglory/uniapp';

//建议定义在其它地方统一，然后import过来
const env = {}
const provide = {}
const method = {}
const store = {}
const api = {}

const frame = createFrame({
  env,
  provide,
  method,
  store,
  api
})
export function createApp() {
  const app = createSSRApp(App)
  app.use(frame)
  return {
    app
  }
}

Options

env

set

const env = { key: 'value', key1: 'value1' }

use

// 一、
export default {
  mounted(){
    this.$env.key;
    this.$env.key1;
  }
}

// 二、
import { useEnv } from '@foreverglory/uniapp'
const env = useEnv()
env.key
env.key1

provide

set

const provide = { key: { k: 'v' }, key1: { k1: 'v1' } }

use

export default {
  inject: ['key', 'key1'],
  mounted(){
    this.key;
    this.key1;
  }
}

method

set

const method = {
  func1(){ /*you code*/ },
  func2(){ /*you code*/ }
}

use

// 一、
export default {
  mounted() {
    this.func1();
    this.func2()
  }
}

// 二、
import { useMethod } from '@foreverglory/uniapp'
const { func1, func2 } = useMethod();
func1();
func2();

store

set

import { createStore } from 'vuex'
const store = {
  store: createStore({ state: {} }),
  modules: {
    name: {
      namespaced: true,
      state: {
        code: 'this is state code'
      },
      getters: {
        code: (state) => state.code
      },
      mutations: {
        setCode(state,code){
          state.code = code
        }
      }
    }
  }
}

use

// 一、
export default{
  mounted(){
    this.$store.state.name.code;
    this.$store.getters['name/code'];
    this.$store.commit('name/setCode','this is new code')
  }
}
// 二、

import { useStore } from '@foreverglory/uniapp'
//import { useStore } from 'vuex'
//两种 import 都可使用
const store = useStore();
store.getters['name/code']
store.commit('name/setCode', 'this is new code')

api

set

//定义一个api模块
import { Api } from '@foreverglory/uniapp';
export default class User extends Api{
  example() {
    return this.http.get('/api/example', query)
  }
  example1() {
    return this.http.post('/api/example1', data)
  }
}

import User from '上面定义的'
const api = {
  domain: 'https://domain.org/api',
  header: {
    'Content-Type': 'application/json',
  },
  interceptor: {
    //自定义请求前修改，如自动添加token
    request: async (options) => {
      return options
    },
    //自定义处理请求结果，默认 statusCode == 200 正常，其它异常
    response: (response) => {
      const { statusCode, data, errMsg } = response;
      statusCode; //200, 401, 403, 500
      data;       //返回的文本
      errMsg;     //状态码对应的错误消息
      //如data里的数据是错误的，抛出异常
      if(statusCode == 200){
        if(!data?.success){
          let error = new Error(data?.message || errMsg);
          error.code = data?.code || statusCode;
          error.errMsg = error.message;
          error.data = data;
          throw error;
        }
      }
      return data
    }
  },
  modules: {
    user: User, //前面定义的模块
  }
}

use

// 一、
export default{
  mounted(){
    //user模块
    this.$api.user.example().then(res => {
      //返回正确
    }).catch(err => {
      //异常处理
    })

    //直接使用
    this.$api.http.get('/api/example').then(res => {  })
    //或
    this.$http.get(`/api/example`)
  }
}
// 二、
import { useApi } from '@foreverglory/uniapp'
const api = useApi();
api.user.example().then((res) => {  }).catch(err => {  })