dc030a032c
Former-commit-id: d18ab13322f94d8b3f007121ec487ca330c8d8b0 [formerly d18ab13322f94d8b3f007121ec487ca330c8d8b0 [formerly d18ab13322f94d8b3f007121ec487ca330c8d8b0 [formerly d18ab13322f94d8b3f007121ec487ca330c8d8b0 [formerly 639ab0fe1aab62b38d1ac6521e2841b06d00723f [formerly ff329c4b89cc0e6957df5a8963731a7cb09f2d59]]]]] Former-commit-id: 5ec70de072f1110071dd2cfed32b335781d6cc38 Former-commit-id: 2f28402753ba1038ffb14c51f93a55ff49da8241 Former-commit-id: db3be14cb2ce33acf427adab3c4afcd23861fb96 [formerly a8186fed38a1f91d3bcc9fede1cf571f850f2712] Former-commit-id: 4c979630b81e3b92b8f516ea80ff187ddb712d0f Former-commit-id: f3380c77310f95b470074a5c0cf19de96a1a4182 Former-commit-id: b8ab0140cc4cd266426284ef68737af065b0f30f Former-commit-id: 54d4349d49e77535e57f604f84d9184d9c69c9d7 Former-commit-id: bd2f2b9a3d76bb9bd92c78a5e704d0671ff760d8
119 lines
2.9 KiB
Vue
119 lines
2.9 KiB
Vue
<template>
|
||
<d2-container class="page">
|
||
<template slot="header">持久化存储用户数据（用户区分存储）</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 day from 'dayjs'
|
||
import { mapActions } from 'vuex'
|
||
export default {
|
||
data () {
|
||
return {
|
||
dataDisplay: '',
|
||
keyNameToSet: '',
|
||
valueToSet: '',
|
||
keyNameList: [],
|
||
keyNameToDelete: ''
|
||
}
|
||
},
|
||
watch: {
|
||
keyNameToDelete (value) {
|
||
if (value) {
|
||
this.handleDelete(value)
|
||
}
|
||
}
|
||
},
|
||
mounted () {
|
||
this.load()
|
||
},
|
||
methods: {
|
||
...mapActions('d2admin/db', [
|
||
'databaseByUser',
|
||
'databaseByUserClear'
|
||
]),
|
||
/**
|
||
* 加载本地数据
|
||
*/
|
||
async load () {
|
||
const db = await this.databaseByUser()
|
||
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.databaseByUser()
|
||
db
|
||
.unset(name)
|
||
.write()
|
||
this.load()
|
||
this.keyNameToDelete = ''
|
||
},
|
||
/**
|
||
* 清空当前用户的数据
|
||
*/
|
||
async handleClear () {
|
||
const db = await this.databaseByUserClear()
|
||
// db 是已经清空了的数据库对象 没有后续操作的话可以不接收这个值
|
||
this.load()
|
||
},
|
||
/**
|
||
* 添加一个数据
|
||
*/
|
||
async handleSet () {
|
||
if (this.keyNameToSet === '') {
|
||
this.$message.error('字段名不能为空')
|
||
return
|
||
}
|
||
const db = await this.databaseByUser()
|
||
db
|
||
.set(this.keyNameToSet, this.valueToSet)
|
||
.write()
|
||
this.load()
|
||
},
|
||
/**
|
||
* 添加一个随机数据
|
||
*/
|
||
async handleSetRandom () {
|
||
const id = day().valueOf()
|
||
const db = await this.databaseByUser()
|
||
db
|
||
.set(id, Math.round(id * Math.random()))
|
||
.write()
|
||
this.load()
|
||
}
|
||
}
|
||
}
|
||
</script>
|