From 4ab87a53435e86476d76ab001b536eb7a6a43a06 Mon Sep 17 00:00:00 2001 From: liyang <1711467488@qq.com> Date: Mon, 20 Aug 2018 11:24:49 +0800 Subject: [PATCH] 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 --- docs/zh/sys-plugins/mock.md | 2 +- docs/zh/sys-vuex/README.md | 493 ++++++++++++++++++- src/store/modules/d2admin/modules/account.js | 11 +- src/store/modules/d2admin/modules/db.js | 98 ++-- 4 files changed, 546 insertions(+), 58 deletions(-) diff --git a/docs/zh/sys-plugins/mock.md b/docs/zh/sys-plugins/mock.md index edb33169..48165b7d 100644 --- a/docs/zh/sys-plugins/mock.md +++ b/docs/zh/sys-plugins/mock.md @@ -1,6 +1,6 @@ # 模拟数据 -在 `src/mock/demo/001.js` 配置拦截返回的数据 +使用模拟数据可以在接口还没做好的时候更方便地进行你的开发 ## 使用 diff --git a/docs/zh/sys-vuex/README.md b/docs/zh/sys-vuex/README.md index 4b94ed06..588f7453 100644 --- a/docs/zh/sys-vuex/README.md +++ b/docs/zh/sys-vuex/README.md @@ -1,7 +1,496 @@ --- sidebar: auto +sidebarDepth: 2 --- -# title +# VUEX -info \ No newline at end of file +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 \ No newline at end of file diff --git a/src/store/modules/d2admin/modules/account.js b/src/store/modules/d2admin/modules/account.js index 927188b4..6aef0392 100644 --- a/src/store/modules/d2admin/modules/account.js +++ b/src/store/modules/d2admin/modules/account.js @@ -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') } } diff --git a/src/store/modules/d2admin/modules/db.js b/src/store/modules/d2admin/modules/db.js index 8160ac25..d6a3e733 100644 --- a/src/store/modules/d2admin/modules/db.js +++ b/src/store/modules/d2admin/modules/db.js @@ -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()) - }) } } }