Files
mes-ui-d2/src/pages/demo/playground/db/user/index.vue
liyang d841dc1ca8 playground
Former-commit-id: d4313aac163dc4f92c51252d306922dc7cd46496 [formerly d4313aac163dc4f92c51252d306922dc7cd46496 [formerly d4313aac163dc4f92c51252d306922dc7cd46496 [formerly d4313aac163dc4f92c51252d306922dc7cd46496 [formerly 8f13842546660b41f32ee8cea677b3209de4f0c2 [formerly a96a4b429c67a647f03669db6785ec1446251f44]]]]]
Former-commit-id: 76dfac0affc29a6a084b816e454228fc4e63f36f
Former-commit-id: 0a586a6f2c175433aea61919f3ab849424c18a53
Former-commit-id: 2cedc575e1ffec291718744aeec8eef97ad78844 [formerly fc782816dff65440d840e213445007ca24916b55]
Former-commit-id: a91ce07ac7ef5bd36e9da3797429af05ea237c29
Former-commit-id: 4a4de848a13dc6de7ba6a32989d25e9ca2e1300a
Former-commit-id: b3dcb91d14f99a5f9a420bc865953e87ad1711fc
Former-commit-id: 0e5de75b1702a2d7cde51e2ea8eef70516788614
Former-commit-id: d946abe5162521f707e7fcc5d64349843d3bb13a
2018-11-17 11:54:57 +08:00

127 lines
3.2 KiB
Vue

<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>