b1459f100d
Former-commit-id: 63fcb6e8af280eb6aa1847600c096fb48cf53ea1 [formerly 63fcb6e8af280eb6aa1847600c096fb48cf53ea1 [formerly 63fcb6e8af280eb6aa1847600c096fb48cf53ea1 [formerly 63fcb6e8af280eb6aa1847600c096fb48cf53ea1 [formerly 632d40c9d0643c6a24abfb7b58b999d829d4f4e5 [formerly 57132b61c7b2f326d08dbe138fda1fac4cb83c62]]]]] Former-commit-id: c0cb71135408e03add94e219759ae37cfb75f31b Former-commit-id: 7f8209eae78f59e644c204712c31dff787899384 Former-commit-id: b08fbd31671e552da8012eb3ee901edf4f89c0e9 [formerly bb7abe3cc56f2f376a59413c370032d896b50c38] Former-commit-id: 0872ac8e17b45829eee426dc5f80f25e37c85ea3 Former-commit-id: 373b0874ce730b26f256600de55a39b2e40d5f9f Former-commit-id: 472309b468a04d5e57a1a917a6472061668cc7f0 Former-commit-id: 88ad7d087a7382d66523f481b7e1476c21f2830d Former-commit-id: 6557698b7db15cc1b62cf9c3976521de6cc194cd
122 lines
2.9 KiB
Vue
122 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 { mapMutations } from 'vuex'
|
||
export default {
|
||
data () {
|
||
return {
|
||
dataDisplay: '',
|
||
keyNameToSet: '',
|
||
valueToSet: '',
|
||
keyNameList: [],
|
||
keyNameToDelete: ''
|
||
}
|
||
},
|
||
watch: {
|
||
keyNameToDelete (value) {
|
||
if (value) {
|
||
this.handleDelete(value)
|
||
}
|
||
}
|
||
},
|
||
mounted () {
|
||
this.load()
|
||
},
|
||
methods: {
|
||
...mapMutations('d2admin', [
|
||
'utilDatabaseUser',
|
||
'utilDatabaseUserClear'
|
||
]),
|
||
/**
|
||
* 加载本地数据
|
||
*/
|
||
load () {
|
||
this.utilDatabaseUser(database => {
|
||
this.dataDisplay = JSON.stringify(database.value(), null, 2)
|
||
this.keyNameList = Object.keys(database.value()).map(k => ({
|
||
value: k,
|
||
label: k
|
||
}))
|
||
})
|
||
},
|
||
/**
|
||
* 删除一个字段
|
||
*/
|
||
handleDelete (name) {
|
||
this.utilDatabaseUser(database => {
|
||
database
|
||
.unset(name)
|
||
.write()
|
||
})
|
||
this.load()
|
||
this.keyNameToDelete = ''
|
||
},
|
||
/**
|
||
* 清空当前用户的数据
|
||
*/
|
||
handleClear () {
|
||
this.utilDatabaseUserClear()
|
||
this.load()
|
||
},
|
||
/**
|
||
* 添加一个数据
|
||
*/
|
||
handleSet () {
|
||
if (this.keyNameToSet === '') {
|
||
this.$message.error('字段名不能为空')
|
||
return
|
||
}
|
||
this.utilDatabaseUser(database => {
|
||
database
|
||
.set(this.keyNameToSet, this.valueToSet)
|
||
.write()
|
||
})
|
||
this.load()
|
||
},
|
||
/**
|
||
* 添加一个随机数据
|
||
*/
|
||
handleSetRandom () {
|
||
this.utilDatabaseUser(database => {
|
||
const id = day().valueOf()
|
||
database
|
||
.set(id, Math.round(id * Math.random()))
|
||
.write()
|
||
})
|
||
this.load()
|
||
}
|
||
}
|
||
}
|
||
</script>
|