文件夹改名
Former-commit-id: 7b74bdf25b14c6a8da08ae07075e3f78be308894 [formerly 7b74bdf25b14c6a8da08ae07075e3f78be308894 [formerly 7b74bdf25b14c6a8da08ae07075e3f78be308894 [formerly 7b74bdf25b14c6a8da08ae07075e3f78be308894 [formerly 1e795e1614aaf94f23ad99354f6ca9be303a1b1e [formerly 9ce21aef6b043d8bfcb2849dd7c6bc34e4625387]]]]] Former-commit-id: c92d7410adc4138c7903c0067860fc3d190f54b0 Former-commit-id: 9f0ab819a505e341a6edf210efb107df8b8efe33 Former-commit-id: 3006c0d2ccda4133203372c30ffee34a73fa8944 [formerly f340ca4127e4578b3c53747d13bbaba223ed4e83] Former-commit-id: 9624c2aaa99880b5e37f1e60f1f36ac673e021ed Former-commit-id: 7923489f2c3c637782d9d4a1707bc48dfe3b1acf Former-commit-id: 2375e080a7f715bc48da40d4c56235efad3f0d5d Former-commit-id: c41402e6c0266a07e974efad41feed7c6fb7d0b6 Former-commit-id: b8814b31619151361c91ed37cb1ee7f3813853c1
This commit is contained in:
liyang
36
src/views/demo/playground/db/all/index.vue
Normal file
36
src/views/demo/playground/db/all/index.vue
Normal file
@@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<d2-container :filename="filename">
|
||||
<template slot="header">
|
||||
<el-alert
|
||||
type="success"
|
||||
:closable="false"
|
||||
title="这个页面展示的是全部数据的存储结构，包括系统区域和存储区域，涵盖所有用户，也就是整个 D2Admin 的数据存储结构"/>
|
||||
</template>
|
||||
<d2-highlight :code="dbData"/>
|
||||
<template slot="footer">
|
||||
<el-button type="primary" @click="load">
|
||||
重新获取本地数据
|
||||
</el-button>
|
||||
</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import util from '@/libs/util'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
filename: __filename,
|
||||
dbData: ''
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.load()
|
||||
},
|
||||
methods: {
|
||||
load () {
|
||||
this.dbData = JSON.stringify(util.db.value(), null, 2)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
128
src/views/demo/playground/db/page-public/index.vue
Normal file
128
src/views/demo/playground/db/page-public/index.vue
Normal file
@@ -0,0 +1,128 @@
|
||||
<template>
|
||||
<d2-container :filename="filename">
|
||||
<template slot="header">
|
||||
<el-alert
|
||||
type="success"
|
||||
:closable="false"
|
||||
title="路由存储指当前路由的存储区域，
|
||||
不同路由之间存储不会相互干扰，
|
||||
使用 await this.$store.dispatch('d2admin/db/databasePage') 获得存储实例进行操作，
|
||||
不同路由条件下获取的存储实例指向位置不同，
|
||||
可以指定路由区分依据 name | path | fullPath，
|
||||
默认根据路由的 name 区分不同的路由"/>
|
||||
</template>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<p class="d2-mt-0">增加不重复字段</p>
|
||||
<el-button @click="handleSetRandom">增加</el-button>
|
||||
<p>增加自定义字段</p>
|
||||
<el-input v-model="keyNameToSet" placeholder="字段名" class="d2-mr-5" style="width: 100px;"/>
|
||||
<el-input v-model="valueToSet" placeholder="值" class="d2-mr-5" style="width: 100px;"/>
|
||||
<el-button @click="handleSet">增加</el-button>
|
||||
<p>删除字段</p>
|
||||
<el-select
|
||||
v-model="keyNameToDelete"
|
||||
placeholder="请选择要删除的 key">
|
||||
<el-option
|
||||
v-for="item in keyNameList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<p>清空当前用户数据</p>
|
||||
<el-button @click="handleClear">清空</el-button>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<d2-highlight :code="dataDisplay"/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { uniqueId } from 'lodash'
|
||||
import { mapActions } from 'vuex'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
filename: __filename,
|
||||
dataDisplay: '',
|
||||
keyNameToSet: '',
|
||||
valueToSet: '',
|
||||
keyNameList: [],
|
||||
keyNameToDelete: ''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
keyNameToDelete (value) {
|
||||
if (value) {
|
||||
this.handleDelete(value)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.load()
|
||||
},
|
||||
methods: {
|
||||
...mapActions('d2admin/db', [
|
||||
'databasePage',
|
||||
'databasePageClear'
|
||||
]),
|
||||
/**
|
||||
* 加载本地数据
|
||||
*/
|
||||
async load () {
|
||||
const db = await this.databasePage()
|
||||
this.dataDisplay = JSON.stringify(db.value(), null, 2)
|
||||
this.keyNameList = Object.keys(db.value()).map(k => ({
|
||||
value: k,
|
||||
label: k
|
||||
}))
|
||||
},
|
||||
/**
|
||||
* 删除一个字段
|
||||
*/
|
||||
async handleDelete (name) {
|
||||
const db = await this.databasePage()
|
||||
db
|
||||
.unset(name)
|
||||
.write()
|
||||
this.load()
|
||||
this.keyNameToDelete = ''
|
||||
},
|
||||
/**
|
||||
* 清空当前用户的数据
|
||||
*/
|
||||
async handleClear () {
|
||||
await this.databasePageClear()
|
||||
this.load()
|
||||
},
|
||||
/**
|
||||
* 添加一个数据
|
||||
*/
|
||||
async handleSet () {
|
||||
if (this.keyNameToSet === '') {
|
||||
this.$message.error('字段名不能为空')
|
||||
return
|
||||
}
|
||||
const db = await this.databasePage()
|
||||
db
|
||||
.set(this.keyNameToSet, this.valueToSet)
|
||||
.write()
|
||||
this.load()
|
||||
},
|
||||
/**
|
||||
* 添加一个随机数据
|
||||
*/
|
||||
async handleSetRandom () {
|
||||
const id = uniqueId()
|
||||
const db = await this.databasePage()
|
||||
db
|
||||
.set(`uniqueKey${id}`, `value${id}`)
|
||||
.write()
|
||||
this.load()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
115
src/views/demo/playground/db/page-snapshot-public/index.vue
Normal file
115
src/views/demo/playground/db/page-snapshot-public/index.vue
Normal file
@@ -0,0 +1,115 @@
|
||||
<template>
|
||||
<d2-container :filename="filename">
|
||||
<template slot="header">
|
||||
<el-alert
|
||||
type="success"
|
||||
:closable="false"
|
||||
title="路由快照相当于路由存储一种快捷操作，
|
||||
会将传入的 vue instance 携带的 $data 全部持久化，
|
||||
下面的表单来自 Element 的表单示例，
|
||||
在 D2Admin 的本页示例中你可以随意填写这个表单，
|
||||
表单内容会自动实时持久化，
|
||||
无论是切换标签页、重新打开标签页、刷新浏览器、重开浏览器、重开浏览器标签页等，
|
||||
该页面数据都会自动恢复到上次填写的状态，
|
||||
这些都只需要你使用 D2Admin 提供的两个方法，
|
||||
总共只需要多写十几行代码"/>
|
||||
</template>
|
||||
<el-form ref="form" :model="form" label-width="80px" style="max-width: 600px; margin: 0px auto;">
|
||||
<el-form-item label="活动名称">
|
||||
<el-input v-model="form.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动区域">
|
||||
<el-select v-model="form.region" placeholder="请选择活动区域">
|
||||
<el-option label="区域一" value="shanghai"></el-option>
|
||||
<el-option label="区域二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动时间">
|
||||
<el-col :span="11">
|
||||
<el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
|
||||
</el-col>
|
||||
<el-col :span="2" style="text-align: center;">-</el-col>
|
||||
<el-col :span="11">
|
||||
<el-time-picker type="fixed-time" placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="即时配送">
|
||||
<el-switch v-model="form.delivery"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动性质">
|
||||
<el-checkbox-group v-model="form.type">
|
||||
<el-checkbox label="线上活动" name="type"></el-checkbox>
|
||||
<el-checkbox label="地推活动" name="type"></el-checkbox>
|
||||
<el-checkbox label="线下活动" name="type"></el-checkbox>
|
||||
<el-checkbox label="品牌曝光" name="type"></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="特殊资源">
|
||||
<el-radio-group v-model="form.resource">
|
||||
<el-radio label="线上品牌商赞助"></el-radio>
|
||||
<el-radio label="线下场地免费"></el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动形式">
|
||||
<el-input type="textarea" v-model="form.desc"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary">立即创建</el-button>
|
||||
<el-button>取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-button
|
||||
slot="footer"
|
||||
type="danger"
|
||||
@click="handleClear">
|
||||
<d2-icon name="trash-o"/>
|
||||
删除当前页面快照
|
||||
</el-button>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapActions } from 'vuex'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
filename: __filename,
|
||||
form: {
|
||||
name: '',
|
||||
region: '',
|
||||
date1: '',
|
||||
date2: '',
|
||||
delivery: false,
|
||||
type: [],
|
||||
resource: '',
|
||||
desc: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
async created () {
|
||||
const data = await this.pageGet({ instance: this })
|
||||
for (const key in data) {
|
||||
if (data.hasOwnProperty(key)) this[key] = data[key]
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
$data: {
|
||||
handler () {
|
||||
this.pageSet({ instance: this })
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions('d2admin/db', [
|
||||
'pageSet',
|
||||
'pageGet',
|
||||
'pageClear'
|
||||
]),
|
||||
async handleClear () {
|
||||
await this.pageClear({ instance: this })
|
||||
this.$message.success('此页面快照已经删除，请重新进入该页面或者关闭选项卡重新打开')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
115
src/views/demo/playground/db/page-snapshot-user/index.vue
Normal file
115
src/views/demo/playground/db/page-snapshot-user/index.vue
Normal file
@@ -0,0 +1,115 @@
|
||||
<template>
|
||||
<d2-container :filename="filename">
|
||||
<template slot="header">
|
||||
<el-alert
|
||||
type="success"
|
||||
:closable="false"
|
||||
title="私有路由快照相当于私有路由存储一种快捷操作，
|
||||
会将传入的 vue instance 携带的 $data 全部根据用户区分持久化，
|
||||
下面的表单来自 Element 的表单示例，
|
||||
在 D2Admin 的本页示例中你可以随意填写这个表单，
|
||||
表单内容会自动实时持久化，
|
||||
无论是切换标签页、重新打开标签页、刷新浏览器、重开浏览器、重开浏览器标签页等，
|
||||
该页面数据都会自动恢复到上次填写的状态，
|
||||
这些都只需要你使用 D2Admin 提供的两个方法，
|
||||
总共只需要多写十几行代码"/>
|
||||
</template>
|
||||
<el-form ref="form" :model="form" label-width="80px" style="max-width: 600px; margin: 0px auto;">
|
||||
<el-form-item label="活动名称">
|
||||
<el-input v-model="form.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动区域">
|
||||
<el-select v-model="form.region" placeholder="请选择活动区域">
|
||||
<el-option label="区域一" value="shanghai"></el-option>
|
||||
<el-option label="区域二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动时间">
|
||||
<el-col :span="11">
|
||||
<el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
|
||||
</el-col>
|
||||
<el-col :span="2" style="text-align: center;">-</el-col>
|
||||
<el-col :span="11">
|
||||
<el-time-picker type="fixed-time" placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="即时配送">
|
||||
<el-switch v-model="form.delivery"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动性质">
|
||||
<el-checkbox-group v-model="form.type">
|
||||
<el-checkbox label="线上活动" name="type"></el-checkbox>
|
||||
<el-checkbox label="地推活动" name="type"></el-checkbox>
|
||||
<el-checkbox label="线下活动" name="type"></el-checkbox>
|
||||
<el-checkbox label="品牌曝光" name="type"></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="特殊资源">
|
||||
<el-radio-group v-model="form.resource">
|
||||
<el-radio label="线上品牌商赞助"></el-radio>
|
||||
<el-radio label="线下场地免费"></el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动形式">
|
||||
<el-input type="textarea" v-model="form.desc"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary">立即创建</el-button>
|
||||
<el-button>取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-button
|
||||
slot="footer"
|
||||
type="danger"
|
||||
@click="handleClear">
|
||||
<d2-icon name="trash-o"/>
|
||||
删除当前页面快照
|
||||
</el-button>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapActions } from 'vuex'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
filename: __filename,
|
||||
form: {
|
||||
name: '',
|
||||
region: '',
|
||||
date1: '',
|
||||
date2: '',
|
||||
delivery: false,
|
||||
type: [],
|
||||
resource: '',
|
||||
desc: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
async created () {
|
||||
const data = await this.pageGet({ instance: this, user: true })
|
||||
for (const key in data) {
|
||||
if (data.hasOwnProperty(key)) this[key] = data[key]
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
$data: {
|
||||
handler () {
|
||||
this.pageSet({ instance: this, user: true })
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions('d2admin/db', [
|
||||
'pageSet',
|
||||
'pageGet',
|
||||
'pageClear'
|
||||
]),
|
||||
async handleClear () {
|
||||
await this.pageClear({ instance: this, user: true })
|
||||
this.$message.success('此页面快照已经删除，请重新进入该页面或者关闭选项卡重新打开')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
140
src/views/demo/playground/db/page-user/index.vue
Normal file
140
src/views/demo/playground/db/page-user/index.vue
Normal file
@@ -0,0 +1,140 @@
|
||||
<template>
|
||||
<d2-container :filename="filename">
|
||||
<template slot="header">
|
||||
<el-alert
|
||||
type="success"
|
||||
:closable="false"
|
||||
title="私有路由存储指当前路由的存储区域，
|
||||
并且同时还根据用户区分，
|
||||
相当于结合了 “路由存储” 和 “私有存储”，
|
||||
不同路由以及不同用户之间存储不会相互干扰，
|
||||
使用 await this.$store.dispatch('d2admin/db/databasePage', { user: true }) 获得存储实例进行操作，
|
||||
不同路由和用户条件下获取的存储实例指向位置不同，
|
||||
可以指定路由区分依据 name | path | fullPath，
|
||||
默认根据路由的 name 区分不同的路由"/>
|
||||
</template>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<p class="d2-mt-0">增加不重复字段</p>
|
||||
<el-button @click="handleSetRandom">增加</el-button>
|
||||
<p>增加自定义字段</p>
|
||||
<el-input v-model="keyNameToSet" placeholder="字段名" class="d2-mr-5" style="width: 100px;"/>
|
||||
<el-input v-model="valueToSet" placeholder="值" class="d2-mr-5" style="width: 100px;"/>
|
||||
<el-button @click="handleSet">增加</el-button>
|
||||
<p>删除字段</p>
|
||||
<el-select
|
||||
v-model="keyNameToDelete"
|
||||
placeholder="请选择要删除的 key">
|
||||
<el-option
|
||||
v-for="item in keyNameList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<p>清空当前用户数据</p>
|
||||
<el-button @click="handleClear">清空</el-button>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<d2-highlight :code="dataDisplay"/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { uniqueId } from 'lodash'
|
||||
import { mapActions } from 'vuex'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
filename: __filename,
|
||||
dataDisplay: '',
|
||||
keyNameToSet: '',
|
||||
valueToSet: '',
|
||||
keyNameList: [],
|
||||
keyNameToDelete: ''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
keyNameToDelete (value) {
|
||||
if (value) {
|
||||
this.handleDelete(value)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.load()
|
||||
},
|
||||
methods: {
|
||||
...mapActions('d2admin/db', [
|
||||
'databasePage',
|
||||
'databasePageClear'
|
||||
]),
|
||||
/**
|
||||
* 加载本地数据
|
||||
*/
|
||||
async load () {
|
||||
const db = await this.databasePage({
|
||||
user: true
|
||||
})
|
||||
this.dataDisplay = JSON.stringify(db.value(), null, 2)
|
||||
this.keyNameList = Object.keys(db.value()).map(k => ({
|
||||
value: k,
|
||||
label: k
|
||||
}))
|
||||
},
|
||||
/**
|
||||
* 删除一个字段
|
||||
*/
|
||||
async handleDelete (name) {
|
||||
const db = await this.databasePage({
|
||||
user: true
|
||||
})
|
||||
db
|
||||
.unset(name)
|
||||
.write()
|
||||
this.load()
|
||||
this.keyNameToDelete = ''
|
||||
},
|
||||
/**
|
||||
* 清空当前用户的数据
|
||||
*/
|
||||
async handleClear () {
|
||||
await this.databasePageClear({
|
||||
user: true
|
||||
})
|
||||
this.load()
|
||||
},
|
||||
/**
|
||||
* 添加一个数据
|
||||
*/
|
||||
async handleSet () {
|
||||
if (this.keyNameToSet === '') {
|
||||
this.$message.error('字段名不能为空')
|
||||
return
|
||||
}
|
||||
const db = await this.databasePage({
|
||||
user: true
|
||||
})
|
||||
db
|
||||
.set(this.keyNameToSet, this.valueToSet)
|
||||
.write()
|
||||
this.load()
|
||||
},
|
||||
/**
|
||||
* 添加一个随机数据
|
||||
*/
|
||||
async handleSetRandom () {
|
||||
const id = uniqueId()
|
||||
const db = await this.databasePage({
|
||||
user: true
|
||||
})
|
||||
db
|
||||
.set(`uniqueKey${id}`, `value${id}`)
|
||||
.write()
|
||||
this.load()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
124
src/views/demo/playground/db/public/index.vue
Normal file
124
src/views/demo/playground/db/public/index.vue
Normal file
@@ -0,0 +1,124 @@
|
||||
<template>
|
||||
<d2-container :filename="filename">
|
||||
<template slot="header">
|
||||
<el-alert
|
||||
type="success"
|
||||
:closable="false"
|
||||
title="公用存储指所有用户共用的存储区域，
|
||||
使用 await this.$store.dispatch('d2admin/db/database') 获得存储实例进行操作"/>
|
||||
</template>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<p class="d2-mt-0">增加不重复字段</p>
|
||||
<el-button @click="handleSetRandom">增加</el-button>
|
||||
<p>增加自定义字段</p>
|
||||
<el-input v-model="keyNameToSet" placeholder="字段名" class="d2-mr-5" style="width: 100px;"/>
|
||||
<el-input v-model="valueToSet" placeholder="值" class="d2-mr-5" style="width: 100px;"/>
|
||||
<el-button @click="handleSet">增加</el-button>
|
||||
<p>删除字段</p>
|
||||
<el-select
|
||||
v-model="keyNameToDelete"
|
||||
placeholder="请选择要删除的 key">
|
||||
<el-option
|
||||
v-for="item in keyNameList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<p>清空当前用户数据</p>
|
||||
<el-button @click="handleClear">清空</el-button>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<d2-highlight :code="dataDisplay"/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { uniqueId } from 'lodash'
|
||||
import { mapActions } from 'vuex'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
filename: __filename,
|
||||
dataDisplay: '',
|
||||
keyNameToSet: '',
|
||||
valueToSet: '',
|
||||
keyNameList: [],
|
||||
keyNameToDelete: ''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
keyNameToDelete (value) {
|
||||
if (value) {
|
||||
this.handleDelete(value)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.load()
|
||||
},
|
||||
methods: {
|
||||
...mapActions('d2admin/db', [
|
||||
'database',
|
||||
'databaseClear'
|
||||
]),
|
||||
/**
|
||||
* 加载本地数据
|
||||
*/
|
||||
async load () {
|
||||
const db = await this.database()
|
||||
this.dataDisplay = JSON.stringify(db.value(), null, 2)
|
||||
this.keyNameList = Object.keys(db.value()).map(k => ({
|
||||
value: k,
|
||||
label: k
|
||||
}))
|
||||
},
|
||||
/**
|
||||
* 删除一个字段
|
||||
*/
|
||||
async handleDelete (name) {
|
||||
const db = await this.database()
|
||||
db
|
||||
.unset(name)
|
||||
.write()
|
||||
this.load()
|
||||
this.keyNameToDelete = ''
|
||||
},
|
||||
/**
|
||||
* 清空当前用户的数据
|
||||
*/
|
||||
async handleClear () {
|
||||
await this.databaseClear()
|
||||
this.load()
|
||||
},
|
||||
/**
|
||||
* 添加一个数据
|
||||
*/
|
||||
async handleSet () {
|
||||
if (this.keyNameToSet === '') {
|
||||
this.$message.error('字段名不能为空')
|
||||
return
|
||||
}
|
||||
const db = await this.database()
|
||||
db
|
||||
.set(this.keyNameToSet, this.valueToSet)
|
||||
.write()
|
||||
this.load()
|
||||
},
|
||||
/**
|
||||
* 添加一个随机数据
|
||||
*/
|
||||
async handleSetRandom () {
|
||||
const id = uniqueId()
|
||||
const db = await this.database()
|
||||
db
|
||||
.set(`uniqueKey${id}`, `value${id}`)
|
||||
.write()
|
||||
this.load()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
126
src/views/demo/playground/db/user/index.vue
Normal file
126
src/views/demo/playground/db/user/index.vue
Normal file
@@ -0,0 +1,126 @@
|
||||
<template>
|
||||
<d2-container :filename="filename">
|
||||
<template slot="header">
|
||||
<el-alert
|
||||
type="success"
|
||||
:closable="false"
|
||||
title="私有存储指当前用户专用的存储区域，
|
||||
不同用户之间存储不会相互干扰，
|
||||
使用 await this.$store.dispatch('d2admin/db/database', { user: true }) 获得存储实例进行操作，
|
||||
不同用户条件下获取的存储实例指向位置不同"/>
|
||||
</template>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<p class="d2-mt-0">增加不重复字段</p>
|
||||
<el-button @click="handleSetRandom">增加</el-button>
|
||||
<p>增加自定义字段</p>
|
||||
<el-input v-model="keyNameToSet" placeholder="字段名" class="d2-mr-5" style="width: 100px;"/>
|
||||
<el-input v-model="valueToSet" placeholder="值" class="d2-mr-5" style="width: 100px;"/>
|
||||
<el-button @click="handleSet">增加</el-button>
|
||||
<p>删除字段</p>
|
||||
<el-select
|
||||
v-model="keyNameToDelete"
|
||||
placeholder="请选择要删除的 key">
|
||||
<el-option
|
||||
v-for="item in keyNameList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<p>清空当前用户数据</p>
|
||||
<el-button @click="handleClear">清空</el-button>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<d2-highlight :code="dataDisplay"/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { uniqueId } from 'lodash'
|
||||
import { mapActions } from 'vuex'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
filename: __filename,
|
||||
dataDisplay: '',
|
||||
keyNameToSet: '',
|
||||
valueToSet: '',
|
||||
keyNameList: [],
|
||||
keyNameToDelete: ''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
keyNameToDelete (value) {
|
||||
if (value) {
|
||||
this.handleDelete(value)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.load()
|
||||
},
|
||||
methods: {
|
||||
...mapActions('d2admin/db', [
|
||||
'database',
|
||||
'databaseClear'
|
||||
]),
|
||||
/**
|
||||
* 加载本地数据
|
||||
*/
|
||||
async load () {
|
||||
const db = await this.database({ user: true })
|
||||
this.dataDisplay = JSON.stringify(db.value(), null, 2)
|
||||
this.keyNameList = Object.keys(db.value()).map(k => ({
|
||||
value: k,
|
||||
label: k
|
||||
}))
|
||||
},
|
||||
/**
|
||||
* 删除一个字段
|
||||
*/
|
||||
async handleDelete (name) {
|
||||
const db = await this.database({ user: true })
|
||||
db
|
||||
.unset(name)
|
||||
.write()
|
||||
this.load()
|
||||
this.keyNameToDelete = ''
|
||||
},
|
||||
/**
|
||||
* 清空当前用户的数据
|
||||
*/
|
||||
async handleClear () {
|
||||
await this.databaseClear({ user: true })
|
||||
this.load()
|
||||
},
|
||||
/**
|
||||
* 添加一个数据
|
||||
*/
|
||||
async handleSet () {
|
||||
if (this.keyNameToSet === '') {
|
||||
this.$message.error('字段名不能为空')
|
||||
return
|
||||
}
|
||||
const db = await this.database({ user: true })
|
||||
db
|
||||
.set(this.keyNameToSet, this.valueToSet)
|
||||
.write()
|
||||
this.load()
|
||||
},
|
||||
/**
|
||||
* 添加一个随机数据
|
||||
*/
|
||||
async handleSetRandom () {
|
||||
const id = uniqueId()
|
||||
const db = await this.database({ user: true })
|
||||
db
|
||||
.set(`uniqueKey${id}`, `value${id}`)
|
||||
.write()
|
||||
this.load()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user