no message

Former-commit-id: c95bbb0cda10632f0a52750b1fdc318417096d8b [formerly c95bbb0cda10632f0a52750b1fdc318417096d8b [formerly c95bbb0cda10632f0a52750b1fdc318417096d8b [formerly c95bbb0cda10632f0a52750b1fdc318417096d8b [formerly cf41c38701e56c75fafa406fcd1ebea2731d9349 [formerly db814b75bce077138bece7a93f0a27d8d346a031]]]]]
Former-commit-id: 05a9602443a85657aeeef66bc7ba8796ecbf168a
Former-commit-id: c73c01a89d38ab738285a2b46ebc4d3737f65008
Former-commit-id: 23f1f94e4ddf155ef196079733660d0e26eff466 [formerly 127085dab54d1bf65593a0bb927f364cbe779d67]
Former-commit-id: a936d089f64fa0b3d94dcc82486640e91cc49c42
Former-commit-id: 990f623db73ff38b96ccfcc99d16e875b745f557
Former-commit-id: 70ff5a911fd0d7d467c7536c20be48315a494b87
Former-commit-id: 4067f407a7f611477169597c18c33eadbb9a1a48
Former-commit-id: 453ae9d110164915f6f700533c1cb38dc34b01a2
This commit is contained in:
liyang 2018-08-20 11:24:49 +08:00
parent ebacb31506
commit 4ab87a5343
4 changed files with 546 additions and 58 deletions

View File

@ -1,6 +1,6 @@
# 模拟数据
`src/mock/demo/001.js` 配置拦截返回的数据
使用模拟数据可以在接口还没做好的时候更方便地进行你的开发
## 使用

View File

@ -1,7 +1,496 @@
---
sidebar: auto
sidebarDepth: 2
---
# title
# VUEX
info
vuex 系统模块目录 `d2-admin/src/store/modules/d2admin/modules`
所有模块:
| 模块名 | 介绍 |
| --- | --- |
| account | 账户 |
| db | 持久化 |
| fullscreen | 全屏 |
| gray | 灰度 |
| log | 日志 |
| menu | 菜单 |
| page | 页面和多标签 |
| releases | 版本 |
| theme | 主题 |
| transition | 页面过渡动画 |
| ua | user agent |
| user | 用户信息 |
下面是每个模块的介绍:
## account
account 负责实现用户的登陆和注销逻辑。
### actions.login
#### 介绍
用户登陆,通常情况下您需要适当修改这个方法来适配您的特殊需要。
#### 参数
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
| --- | --- | --- | --- | --- | --- |
| vm | vue 实例 | 必选 | Object | | |
| username | 账号 | 必选 | String | | |
| password | 密码 | 必选 | String | | |
#### 示例
``` js
this.$store.dispatch('d2admin/account/login', {
vm: this,
username: this.formLogin.username,
password: this.formLogin.password
})
```
### actions.logout
#### 介绍
用户注销,通常情况下您需要适当修改这个方法来适配您的特殊需要。
#### 参数
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
| --- | --- | --- | --- | --- | --- |
| vm | vue 实例 | 必选 | Object | | |
| confirm | 注销确认 | 非 | Boolean | | false |
#### 示例
``` js
this.$store.dispatch('d2admin/account/logout', {
vm: this,
confirm: true
})
```
### mutations.load
#### 介绍
用户登陆后从数据库加载一系列的设置,例如:
* 用户名
* 主题
* 页面过渡效果设置
* 上次退出时的多页列表
* 侧边栏折叠状态
如果你扩展了系统功能并且涉及到设置项的数据持久化,不要忘了更新这里。
#### 参数
#### 示例
``` js
this.$store.commit('d2admin/account/load')
```
## db
### mutations.set
#### 介绍
将数据存储到指定位置 | 路径不存在会自动初始化。
::: warning 注意
不建议在业务代码中使用此方法,此方法可以访问到任何的持久化数据位置,只在开发系统模块时调用,并且使用时您应该十分清楚您正在做什么。
:::
#### 参数
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
| --- | --- | --- | --- | --- | --- |
| dbName | 数据库名称 | 非 | String | database, sys | database |
| path | 存储路径 | 非 | String | | 空字符串 |
| value | 需要存储的值 | 非 | String | | 空字符串 |
#### 示例
``` js
this.commit('d2admin/db/set', {
dbName: 'database',
path: 'demo.sometext',
value: 'Hello World'
})
```
### mutations.setByUser
#### 介绍
将数据存储到指定位置 | 路径不存在会自动初始化 [ 区分用户 ]。
::: warning 注意
不建议在业务代码中使用此方法,此方法可以访问到任何的持久化数据位置,只在开发系统模块时调用,并且使用时您应该十分清楚您正在做什么。
:::
#### 参数
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
| --- | --- | --- | --- | --- | --- |
| dbName | 数据库名称 | 非 | String | database, sys | database |
| path | 存储路径 | 非 | String | | 空字符串 |
| value | 需要存储的值 | 非 | String | | 空字符串 |
#### 示例
``` js
this.commit('d2admin/db/setByUser', {
dbName: 'database',
path: 'demo.sometext',
value: 'Hello World'
})
```
### actions.get
#### 介绍
效果类似于取值 dbName.path || defaultValue。
::: warning 注意
不建议在业务代码中使用此方法,此方法可以访问到任何的持久化数据位置,只在开发系统模块时调用,并且使用时您应该十分清楚您正在做什么。
:::
#### 参数
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
| --- | --- | --- | --- | --- | --- |
| dbName | 数据库名称 | 非 | String | database, sys | database |
| path | 存储路径 | 非 | String | | 空字符串 |
| defaultValue | 取值失败的默认值 | 非 | String | | 空字符串 |
#### 示例
``` js
const value = await this.dispatch('d2admin/db/get', {
dbName: 'database',
path: 'demo.sometext',
defaultValue: 'Hello World'
})
```
### actions.getByUser
#### 介绍
效果类似于取值 dbName.path[user] || defaultValue。
::: warning 注意
不建议在业务代码中使用此方法,此方法可以访问到任何的持久化数据位置,只在开发系统模块时调用,并且使用时您应该十分清楚您正在做什么。
:::
#### 参数
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
| --- | --- | --- | --- | --- | --- |
| dbName | 数据库名称 | 非 | String | database, sys | database |
| path | 存储路径 | 非 | String | | 空字符串 |
| defaultValue | 取值失败的默认值 | 非 | String | | 空字符串 |
#### 示例
``` js
const value = await this.dispatch('d2admin/db/getByUser', {
dbName: 'database',
path: 'demo.sometext',
defaultValue: 'Hello World'
})
```
### actions.database
#### 介绍
获取存储数据库对象。
#### 参数
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
| --- | --- | --- | --- | --- | --- |
| user | 是否区分用户 | 非 | Boolean | | false |
#### 示例
不区分用户存储:
``` js
const db = await this.dispatch('d2admin/db/database')
db
.set('keyName', 'value')
.write()
```
区分用户存储:
``` js
const db = await this.dispatch('d2admin/db/database', {
user: true
})
db
.set('keyName', 'value')
.write()
```
### actions.databaseClear
#### 介绍
清空存储数据库对象。
#### 参数
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
| --- | --- | --- | --- | --- | --- |
| user | 是否区分用户 | 非 | Boolean | | false |
#### 示例
不区分用户清空:
``` js
this.dispatch('d2admin/db/databaseClear')
```
区分用户清空:
``` js
this.dispatch('d2admin/db/databaseClear', {
user: true
})
```
如果您想进行后续操作,可以接受返回值,返回值为可以直接操作的 db 对象:
``` js
const db = await this.dispatch('d2admin/db/databaseClear')
db
.set('keyName', 'value')
.write()
```
### actions.databasePage
#### 介绍
获取存储数据库对象 [ 区分页面 ]。
#### 参数
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
| --- | --- | --- | --- | --- | --- |
| vm | vue 实例 | 必选 | Object | | |
| basis | 页面区分依据 | 非 | name, path, fullPath | | name |
| user | 是否区分用户 | 非 | Boolean | | false |
#### 示例
不区分用户存储:
``` js
const db = await this.$store.dispatch('d2admin/db/databasePage', {
vm: this
})
db
.set('keyName', 'value')
.write()
```
区分用户存储:
``` js
const db = await this.$store.dispatch('d2admin/db/databasePage', {
vm: this,
user: true
})
db
.set('keyName', 'value')
.write()
```
### actions.databasePageClear
#### 介绍
清空存储数据库对象 [ 区分页面 ]。
#### 参数
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
| --- | --- | --- | --- | --- | --- |
| vm | vue 实例 | 必选 | Object | | |
| basis | 页面区分依据 | 非 | name, path, fullPath | | name |
| user | 是否区分用户 | 非 | Boolean | | false |
#### 示例
不区分用户清空:
``` js
this.$store.dispatch('d2admin/db/databasePageClear', {
vm: this
})
```
区分用户清空:
``` js
this.$store.dispatch('d2admin/db/databasePageClear', {
vm: this,
user: true
})
```
如果您想进行后续操作,可以接受返回值,返回值为可以直接操作的 db 对象:
``` js
const db = await this.dispatch('d2admin/db/databasePageClear')
db
.set('keyName', 'value')
.write()
```
### actions.pageSet
#### 介绍
快速将页面当前的数据 ( $data ) 持久化。
#### 参数
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
| --- | --- | --- | --- | --- | --- |
| vm | vue 实例 | 必选 | Object | | |
| basis | 页面区分依据 | 非 | name, path, fullPath | | name |
| user | 是否区分用户 | 非 | Boolean | | false |
#### 示例
不区分用户存储:
``` js
this.$store.dispatch('d2admin/db/pageSet', {
vm: this
})
```
区分用户存储:
``` js
this.$store.dispatch('d2admin/db/pageSet', {
vm: this,
user: true
})
```
### actions.pageLoad
#### 介绍
快速获取页面快速持久化的数据。
#### 参数
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
| --- | --- | --- | --- | --- | --- |
| vm | vue 实例 | 必选 | Object | | |
| basis | 页面区分依据 | 非 | name, path, fullPath | | name |
| user | 是否区分用户 | 非 | Boolean | | false |
#### 示例
不区分用户获取:
``` js
// 获取数据
const data = await this.pageLoad({
vm: this
})
// 将数据还原到页面
for (const key in data) {
if (data.hasOwnProperty(key)) this[key] = data[key]
}
```
区分用户获取:
``` js
// 获取数据
const data = await this.pageLoad({
vm: this,
user: true
})
// 将数据还原到页面
for (const key in data) {
if (data.hasOwnProperty(key)) this[key] = data[key]
}
```
### actions.pageClear
#### 介绍
清空页面快照。
#### 参数
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
| --- | --- | --- | --- | --- | --- |
| vm | vue 实例 | 必选 | Object | | |
| basis | 页面区分依据 | 非 | name, path, fullPath | | name |
| user | 是否区分用户 | 非 | Boolean | | false |
#### 示例
不区分用户清空:
``` js
this.$store.dispatch('d2admin/db/pageClear', {
vm: this
})
```
区分用户清空:
``` js
this.$store.dispatch('d2admin/db/pageClear', {
vm: this,
user: true
})
```
如果您想进行后续操作,可以接受返回值,返回值为可以直接操作的 db 对象:
``` js
const db = await this.dispatch('d2admin/db/pageClear')
db
.set('keyName', 'value')
.write()
```
## fullscreen
## gray
## log
## menu
## page
## releases
## theme
## transition
## ua
## user

View File

@ -32,7 +32,7 @@ export default {
commit('d2admin/user/set', {
name: res.data.name
}, { root: true })
// 用户登陆后从数据加载一系列的设置
// 用户登陆后从持久化数据加载一系列的设置
commit('d2admin/account/load', null, { root: true })
// 跳转路由
vm.$router.push({
@ -51,7 +51,7 @@ export default {
* @param {Object} param vm {Object} vue 实例
* @param {Object} param confirm {Boolean} 是否需要确认
*/
logout ({ commit }, { vm, confirm }) {
logout ({ commit }, { vm, confirm = false }) {
/**
* @description 注销
*/
@ -87,8 +87,7 @@ export default {
},
mutations: {
/**
* @class ...
* @description 用户登陆后从数据库加载一系列的设置
* @description 用户登陆后从持久化数据加载一系列的设置
* @param {Object} state vuex state
*/
load (state) {
@ -98,9 +97,9 @@ export default {
this.commit('d2admin/theme/load')
// DB -> store 加载页面过渡效果设置
this.commit('d2admin/transition/load')
// DB -> store 数据加载上次退出时的多页列表
// DB -> store 持久化数据加载上次退出时的多页列表
this.commit('d2admin/page/openedLoad')
// DB -> store 数据加载这个用户之前设置的侧边栏折叠状态
// DB -> store 持久化数据加载这个用户之前设置的侧边栏折叠状态
this.commit('d2admin/menu/asideCollapseLoad')
}
}

View File

@ -11,7 +11,7 @@ import util from '@/libs/util.js'
* @returns {String} 可以直接使用的路径
*/
function pathInit ({
dbName = 'db',
dbName = 'database',
path = '',
user = true,
validator = () => true,
@ -33,14 +33,14 @@ export default {
mutations: {
/**
* @description 将数据存储到指定位置 | 路径不存在会自动初始化
* @description 效果类似于 dbName.path = value
* @description 效果类似于取值 dbName.path = value
* @param {Object} state vuex state
* @param {Object} param dbName {String} 数据库名称
* @param {Object} param path {String} 存储路径
* @param {Object} param value {*} 需要存储的值
*/
set (state, {
dbName = 'db',
dbName = 'database',
path = '',
value = ''
}) {
@ -52,14 +52,14 @@ export default {
},
/**
* @description 将数据存储到指定位置 | 路径不存在会自动初始化 [ 区分用户 ]
* @description 效果类似于 dbName.path[user] = value
* @description 效果类似于取值 dbName.path[user] = value
* @param {Object} state vuex state
* @param {Object} param dbName {String} 数据库名称
* @param {Object} param path {String} 存储路径
* @param {Object} param value {*} 需要存储的值
*/
setByUser (state, {
dbName = 'db',
dbName = 'database',
path = '',
value = ''
}) {
@ -70,6 +70,50 @@ export default {
}
},
actions: {
/**
* @description 获取数据
* @description 效果类似于取值 dbName.path || defaultValue
* @param {Object} state vuex state
* @param {Object} param dbName {String} 数据库名称
* @param {Object} param path {String} 存储路径
* @param {Object} param defaultValue {*} 取值失败的默认值
*/
get (context, {
dbName = 'database',
path = '',
defaultValue = ''
}) {
return new Promise(resolve => {
resolve(db.get(pathInit({
dbName,
path,
user: false,
defaultValue
})).value())
})
},
/**
* @description 获取数据 [ 区分用户 ]
* @description 效果类似于取值 dbName.path[user] || defaultValue
* @param {Object} state vuex state
* @param {Object} param dbName {String} 数据库名称
* @param {Object} param path {String} 存储路径
* @param {Object} param defaultValue {*} 取值失败的默认值
*/
getByUser (context, {
dbName = 'database',
path = '',
defaultValue = ''
}) {
return new Promise((resolve, reject) => {
resolve(db.get(pathInit({
dbName,
path,
user: true,
defaultValue
})).value())
})
},
/**
* @description 获取存储数据库对象
* @param {Object} context context
@ -212,50 +256,6 @@ export default {
defaultValue: {}
})))
})
},
/**
* @description 获取数据
* @description 效果类似于 dbName.path || defaultValue
* @param {Object} state vuex state
* @param {Object} param dbName {String} 数据库名称
* @param {Object} param path {String} 存储路径
* @param {Object} param defaultValue {*} 取值失败的默认值
*/
get (context, {
dbName = 'db',
path = '',
defaultValue = ''
}) {
return new Promise(resolve => {
resolve(db.get(pathInit({
dbName,
path,
user: false,
defaultValue
})).value())
})
},
/**
* @description 获取数据 [ 区分用户 ]
* @description 效果类似于 dbName.path[user] || defaultValue
* @param {Object} state vuex state
* @param {Object} param dbName {String} 数据库名称
* @param {Object} param path {String} 存储路径
* @param {Object} param defaultValue {*} 取值失败的默认值
*/
getByUser (context, {
dbName = 'db',
path = '',
defaultValue = ''
}) {
return new Promise((resolve, reject) => {
resolve(db.get(pathInit({
dbName,
path,
user: true,
defaultValue
})).value())
})
}
}
}