vue-satan
v1.5.2
Published
一个类似dva的vue框架;1. start中增加autoResetModel配置项(默认true),实现model的引用管理,自动卸载和重置无引用的model;2. 清理不必要的model引用,从而优化内存使用; 3. 累积bug的修复;
Downloads
7
Readme
1. 介绍
satan 是一个基于 vuex
和 vue-router
的数据流方案,一个轻量级的应用框架( dva.js
的自制 vue
版本)。总体的功能和 api 均参照 dva.js
。
2. 特性
- 简单易用 :尽量与
vuex
和vue-router
的api
使用方法保持一致性,尽量降低使用的复杂性。
3. 如何开始工作?
- 视图组件注入 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
- 在 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 函数
- subscription 和 action 中第一个参数是一个对象,并且包含
dispatch
函数 ,用于触发一个 aciton 或者是mutation函数
。 - 可在
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("/");
}
});
},