Vue, App与我(六)
- Big-man 今天需要义正言辞地扯一下配置文件, 为什么了?
- 因为Big-man遇到了一个新的问题,需要引入
Express.js
,Express.js
的介绍请点击——Express.js,利用里面的connect-history-api-fallback
等等属性来进行浏览求返回的开发。 - 接下来就开始拉开序幕。
vuet.js
的介绍和引入:- Vuet是什么?
- Vuet是Vue.js的一种状态管理模式,它以模块化管理为核心,以规则更新为主,手动更新为辅来进行模块的状态更新,总之它给你提供了一片草原,由你来决定如何驰骋
- 全局方法:
Vuet.mapModules(any)
- 描述: 组件和Vuet的模块连接起来
- 返回值: Object
- 例子:
import { mapModules } from 'vuet' // 等同于 Vuet.mapModules
export default {
// ... 选项
mixins: [
mapModules({ '组件注入的名称': '模块的路径' })
]
// 同时还支持以下几种写法
// mapModules('test') 等同于 mapModules({ test: 'test' })
// mapModules('test', 'test/chlidren') 等同于 mapModules({ 'test': 'test/chlidren' })
}
Vuet.mapRules(any)
- 描述: 向组件混入模块更新的规则,Vuet内置了
route
,once
,need
,life
这几种常见的数据更新规则 - 返回值: Object
- 例子:
- 描述: 向组件混入模块更新的规则,Vuet内置了
import { mapRules } from 'vuet' // 等同于 Vuet.mapRules
export default {
// ... 选项
mixins: [
// 完整写法
mapRules({ '规则名称': [{ path: '更新模块路径' }] })
]
// 同时还支持以下几种简写
// mapRules('规则名称', '更新的模块路径') 等同于 mapRules({ '规则名称': [{ path: '更新模块路径' }] })
// mapRules('规则名称', ['更新的模块路径']) 等同于 mapRules({ '规则名称': [{ path: '更新模块路径' }] })
// mapRules({ '规则名称': '更新模块路径' }) 等同于 mapRules({ '规则名称': [{ path: '更新模块路径' }] })
}
life
- 描述: 每次都会在组件的
beforeCreate
钩子中调用一次更新,组件销毁时在destroyed
钩子,状态会被重置,恢复到初始状态。
- 描述: 每次都会在组件的
manual
- 参数:
- manuals: Object{name: String | Function}
- 默认值: $当前模块名称
- 描述: 在业务中,我们常常需要各种手动更新状态的操作,manual就是将这种更新的操作集中起来。点我查看完整例子,另外还允许在调用mapRules方法时重置名字
- 例子:
new Vuet({
modules: {
name: 'myTest', // 设置在组件中混入的名字
test: {
data () {
return {
count: 0
}
},
manuals: {
// ... manual会对fetch、reset、getState、setState方法进行一层封装,自动传入path参数。
// 同时还提供了`this.mapManuals(path)`方法,可以取得其他模块的manuals,方便互相调用
plus ({ state, app, vuet }) {
state.count++
// 或 this.setState({ count: count })
},
reduce ({ state, vm, vuet }) {
state.count--
}
}
}
}
})
mapRules({
manual: 'test' // this.myTest.xx
// 同时还支持重置名字,在组件中调用: this.Test.xx
// manual: [{ path: 'test', name: 'Test' }]
// 如果模块中没有设置名称,则默认以[`$${模块名称}`]为默认设置,调用: this.$test.xx
// manual: 'test'
})
need
- 描述: 每次都会在组件的beforeCreate钩子中调用一次更新
once
- 描述: 仅第一次在组件的beforeCreate钩子中调用一次更新,之后在任何组件都不会再进行更新
route
- 参数:
routeWatch: String | Array[String]
- 默认值: ‘fullPath’
- 描述: 页面发生变化的规则
- 描述:与vue-router模块配合使用,负责统一管理页面切换的状态更新,变化返回请选择this.$route里面的字段,如果页面需要记录滚动条位置的请移步查看v-vuet-scroll指令配合使用
- 例子:
- 参数:
new Vuet({
modules: {
list: {
routeWatch: 'query',
data () {
return {
list: []
}
}
},
detail: {
routeWatch: ['params.id'],
data ({ params }) {
// params.routeWatch 是route规则在调用fetch方法时,传入的一个参数,所以在非route规则调用时可能是undefined
// true 则是路由发生了变化
// false 路由没有发生变化,比如是从详情返回到列表
// 可以根据这个特性实现上拉加载
return {
id: null,
title: null,
content: null
}
}
}
}
})
Vuet.rule(name: String, rule: Object)
- 描述: 自定义更新规则。
- 返回值:
this
import Vuet from 'vuet'
Vuet.rule('myRule', {
install (Vue, Vuet) {
// 传入一个Vue和Vuet,比如你可以给Vuet.prototype.xxx 添加方法
},
init (vuet) {
// 接收到当前的vuet实例,你可以在这里初始化程序的一些自定义配置,例如:
// vuet.__myRule__ = xxx
},
destroy (vuet) {
// 销毁vuet实例调用的钩子
},
rule ({ path }) { // 定义数据的更新规则
// path是当前处理的模块路径
// 需要返回一个Object对象,将会插入到Vue mixins中
return {
beforeCreate () {
const vuet = this.$vuet // 取得在Vue实例上挂载的Vuet实例
vuet.fetch(path) // 调用vuet的fetch方法来更新数据
}
}
}
})
- 全局指令:
v-vuet-scroll
:
- 描述: Vuet模块系统和Vue深度集成的滚动条双向绑定,可以轻易实现各种复杂的滚动条管理,会在Vuet的模块中隐式的创建$scroll对象存储滚动位置,另外route规则在页面切换时,会重置模块的滚动条状态,
- 修饰符
window
绑定到window滚动条上
<div v-vuet-scroll.window="{ path: '....' }"></div>
self
绑定到元素自身的内部滚动条,默认绑定元素内部滚动条
<div v-vuet-scroll.self="{ path: '...', name: '...' }"></div>
- 参数
path Vuet
的模块路径,必传参数name
绑定self
时,为必传参数self
绑定元素内部的滚动条位置 window 绑定window滚动条的位置
<div v-vuet-scroll.window.self="{ path: '...', name: '...', self: { x: 0, y: 0 }, window: { x: 0, y: 0 } }"></div>
- 基本选项:
data
- 类型:
Function
- 返回值:
Object
- 默认值:
{}
- 描述: 所有的模块状态,都会调用
data
方法, 将返回的对象合并到一起。
- 类型:
pathJoin
- 类型:String
- 默认值:
null
- 描述: 模块路径以子模块首字母大写生成,可传入 - 或者 / 等做为模块分隔符,比如
/: test/children
modules
- 类型:
Object
- 默认值:
{}
- 描述:程序会递归遍历,如果对象
Object
里面包含了一个data
方法,则会被认为是一个模块。 - 例子:
- 类型:
new Vuet({
modules: {
myModule: {
// ...模块选项
data () {
return {
// ...
}
},
chlidrenModule: {
// ...模块选项
data () {
return {
// ...
}
}
}
},
}
})
- 模块选项:
data
- 类型:
Function
- 返回值:
Object
- 描述:定义一个模块状态的初始值,它和全局选项中
data
返回值合并到一起。 - 例子:
const vuet = new Vuet({
data () {
return {
loading: true
}
},
modules: {
myModule: {
data () {
return {
count: 0
}
}
}
}
})
vuet.getState('myModule') // { loading:true, count: 0 }
fetch
- 类型: Function
- 返回值: Promise
- 描述: 向服务器请求模块的数据
- 例子:
const vuet = new Vuet({
modules: {
myModule: {
data () {
return {
count: 0
}
},
fetch () {
return Promise.resolve({
count: 100
})
}
}
}
})
vuet
.fetch('myModule')
.then((store) => {
console.log(store) // { count: 100 }
})
- Vuet实例属性:
store
- 类型: 只读
描述: 所有的模块状态存储在这里
beforeHooks
- 类型:只读
描述:在调用实例的
fetch
方法之前,会调用里面的钩子。afterHooks
:- 类型:只读
描述:在调用实例的
fetch
之后,会调用里面的钩子app
- 类型:只读
描述:
Vuet
实例挂载到vue
的应用程序中的根组件。options
- 类型:只读
描述:
Vuet
实例初始化时,传入的选项。_options
- 类型:只读
描述:根据传入的选项,生成全局和模块的选项。
vm
- 类型:只读
描述:
Vuet
内部的Vue
实例name
- 类型:只读
描述:存储了模块的原始名称,
vuet.names['path']
类获取,在开发一些插件时尤其有用Vuet
组件内注入Vuet
实例属性
import Vue from 'vue'
import Vuet from 'vuet'
Vue.use(Vuet)
const vuet = new Vuet({
// ... base options
})
new Vue({
// ...
vuet,
created () {
//this.$vuet.xxx
}
})
- Vuet实例方法:
beforeEach(fn: Function)
- 返回值:
this
- 参数:
fn
要执行的方法,必选参
- 描述:每次组件实例
fetch
方法调用之前执行钩子 - 例子:
const vuet = new Vuet({
// ... 选项
})
vuet.beforeEach(({ path, params, state, route }) => {
console.log(path) // 当前更新的模块路径
console.log(params) // 组件实例fetch方法传入的自定义参数
console.log(state) // 当前更新的模块状态
console.log(route) // 当前路由信息
})
afterEach(fn: Function)
- 参数:
fn
要执行的方法,必选参
- 返回值:
this
- 描述:每次组件实例
fetch
方法调用之后执行ch
钩子。 - 例子:
const vuet = new Vuet({
// ... 选项
})
vuet.beforeEach((err, { path, params, state, route }) => {
console.log(err) // 如果请求失败,会传入错误的信息
console.log(path) // 当前更新的模块路径
console.log(params) // 组件实例fetch方法传入的自定义参数
console.log(state) // 当前更新的模块状态
console.log(route) // 当前路由信息
})
getState(path: String)
- 参数:
path
模块的路径,必选参。
- 返回值:
Object
- 描述:获取某个模块的状态值
- 例子:
const vuet = new Vuet({
// ... 选项
modules: {
myModule: {
data () {
return {
count: 0
}
}
}
}
})
vuet.getState('myModule') // { count: 0 }
setState(path: String, newState: any)
- 参数:
path
模块的路径,必须参newState
新的状态,必选参
- 返回值:
this
- 描述:设置某个模块的状态,设置内容必须保证和模块的数据类型一致有效,
Object
类型比较特殊,会和原来的对象进行浅合并。 - 例子:
const vuet = new Vuet({
// ... 选项
modules: {
myModule: {
data () {
return {
count: 0,
text: 'ok'
}
}
}
}
})
vuet
.setState('myModule', { count: 100 })
.getState('myModule') // { count: 100, text: 'ok' }
fetch(path: String, params: Object, setStateBtn: true)
- 参数:
path
模块的路径,必选参params
自定义参数,在beforeEach
和afterEach
钩子中接收到,可选参,默认为{}
setStateBtn
请求成功后,是否自动设置状态,如果为false
, 则会直接返回fatch
请求回来的对象,而不是模块的状态,可选参,默认为true
。
- 返回值:
Promise
描述:向服务器取得数据跟新。
data(path: String)
- 参数:
path
模块的路径,必选参
- 描述:取得模块的初始数据
- 参数:
mapModules(path: String)
- 参数:
path
模块的路径,必选参
- 描述:取得
manual
规则更新模块状态的方法
- 参数:
destroy()
- 描述:销毁
Vuet
, 释放内存
- 描述:销毁
Vuet
组件注入Vuet
实例属性:
import Vue from 'vue'
import Vuet from 'vuet'
Vue.use(Vuet)
const vuet = new Vuet({
// ... base options
})
new Vue({
// ...
vuet,
created () {
//this.$vuet.xxx
}
})
JackDan9 Thinking!