vue-satan v1.5.2

1. 介绍

satan 是一个基于 vuex 和 vue-router 的数据流方案，一个轻量级的应用框架（ dva.js 的自制 vue 版本）。总体的功能和 api 均参照 dva.js 。

2. 特性

• 简单易用 ：尽量与 vuex 和 vue-router 的 api 使用方法保持一致性，尽量降低使用的复杂性。

3. 如何开始工作？

1. 视图组件注入 Model

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const routes = [
  {
    path: '/',
    name: 'map',
    models: () => [import('@/models/map')],
    component: () => import('@/pages/map'),
  },
]
export default routes

2. 在 SPA 的入口处加入如下代码

import { createSatan } from 'satan'
import App from './App'

const satanApp = createSatan({
  components: { App },
})

// 获取全局配置，会在start执行前执行完成
satanApp.setConfigUrl('config/app.json')
// 预加载model，使用setupModel
satanApp.setupModel(require('./models/app'))
satanApp.setupModel(require('./models/markerPoint.js'))
satanApp.setupModel(require('./models/map'))
satanApp.routes(router)
satanApp.start('#app')

satanApp 增加 mapState 和 guard 方法

4. 概念

4.1 数据流向

我们先大体了解下 dva.js 的数据流向

Satan 的数据流向完全参考 dva.js （仅仅是实现方法不一样）

4.2 Models

model 一个领域模型，在 satan 中，文件的结构与 store 一致。包含：state 、 subscriptions 、 actions 、 mutations 、 getters 和 namespace ，下面将逐一说明。实际 satan 在实现中将一个 model 当作一个 Module 处理。

4.2.1 State

model 的状态数据，表现为一个 javascript 对象。

4.2.2 Action Object

一个普通的 javascript 对象，用于描述一个行为。

{
    type:'action或者mutation的名称',
    payload:any
}

4.2.3 Actions

接受一个与 vuex 中 store 实例具有相同方法和属性的 context 对象，因此可使用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters 。satan 并没有对 action 的参数进行特别处理，因此尽量避免在 action 中使用 context.dispatch 函数，因为此方法的语义与 satan 中定义的 dispatch 函数存在差别。

4.2.4 Mutations

修改 Store 中 State 的唯一方法是提交 mutation 。会接受 state 作为第一个参数，第二个参数是 mutaition 的负载(Payload)，通常通过在 action 中调用 store.commit 传入。

4.2.5 Subscriptions

订阅函数的上下文和 Store 上下文相同。

• keyEvent 订阅函数

  • key 函数

  keyEvent({ call, key }) {
   key('s', () => {
  
   });
  },

• setup 订阅函数 ： 用于订阅路由事件，由 beforeRouteEnter 的 next 函数触发，及发生在组件的 dom 更新之后

  • path 函数
  • name 函数 name( routerName , (route) => { }) 控制在访问指定路由时执行指定函数

  setup({ name, call }) {
    name('map', async (payload) => {
    });
  },

• 其他订阅 可使用 action 或者 mutation 同名的函数订阅相应的 action 或者是 mutation，该订阅函数将在 action 或者 mutation 执行完成之后执行，但要注意的是此处容易产生的循环调用导致的死循环。

4.3 常用函数

• dispatch 函数

1. subscription 和 action 中第一个参数是一个对象，并且包含 dispatch函数 ，用于触发一个 aciton 或者是 mutation函数 。
2. 可在 connect视图 中使用

dispatch({ type: 'loadEsriModule', payload: { Map, WebScene, SceneLayer } })

• put 函数

  subscription 和 actions 中第一个参数是一个对象，并且包含 put 函数，此函数功能等同于 commit 函数，用于提交状态到 mutation函数

 put({ type: 'updateMapLayers', payload: {});

• select 函数

  subscription 和 actions 中第一个参数是一个对象，并且包含 select 函数， 此函数的会传入 rootState，用于获取全局 State 下的状态。

vxRouter

Satan 提供 vxRouter （vuex+vue-router）以方便在 model 中实现编程示导航。

import { vxRouter } from 'vue-satan'

config

在入口处增加全局配置

支持的全局配置

const satanApp = createSatan({
  components: {
    App,
  },
  config: 'config/dev.local.json',
  autoResetModel: true, //自动重置model的状态，以回收内存， 不设置默认true
})

config 支持 url（http）和对象两种模式，也可以使用单独设置

satanApp.setConfigUrl('config/app.json')

注意:为了保证在 setupModel 加载的模型发生在全局配置加载完成后，使用以下方法

satanApp.setupModel(() => require('./models/app'))

vue-satan 集成 request

将 request 集成进 vue-satan 中，并提供 setRequestConfig 方法，以设置 request 。

如何在项目中使用 request

import { setRequestConfig, request } from 'vue-satan'
import { message } from 'ant-design-vue'
import { queryCookie } from './cookie'
import { onError } from '../plugins'

const getAccessToken = () => {
  const access_token = queryCookie('access_token')
  return access_token
}

setRequestConfig({
  onError,
  //默认的全局拦截器
  interceptor: async () => {
    let access_token = queryCookie('access_token')
    let refresh_token = queryCookie('refresh_token')
    if (!access_token && refresh_token) {
      access_token = await refreshAccessToken(refresh_token)
    }
  },
  //用于设置头信息的方法
  setHeader: (headers) => {
    const accessToken = getAccessToken()
    if (accessToken) {
      headers.Authorization = `Bearer ${accessToken}`
    }
  },
  showErrorMessage: message.error,
})

export default request

request 方法的参数说明：

request(options, payload, headerOptions, requestBody)

• options: 按 request-line 的格式，提供请求的方法和地址，如POST /users/:id
• payload：可用于设置 body 和 path、query 中参数值
• headerOptions: 头信息设置
• requestBody: 如果传值，会覆盖 payload 的 body 设置，将 requestBody 的对象当成本次请求报文的 body(此参数只针对 post 和 put)
• interceptorOptions:{interceptor,disableInterceptor} :
  • interceptor:覆盖默认的拦截器
  • disableInterceptor:为true将禁用拦截器

vue-satan 增加 getContext

import { getContext } from 'vue-satan'

let context = getContext()
let { satanApp } = context

提供的方法：

• push(location, onComplete, onAbort)
• replace(location, onComplete, onAbort)
• go(n)
• goForward()
• goBack()

 setup({ call, name }) {
            let self = this;
            name('login', (route) => {
                let cookie = getCookie(LOGIN_INFO);
                if(cookie)
                {
                    call({ type: 'app/getUserInfo' });
                    vxRouter.push("/");
                }
            });
},

单元测试