mes-ui-d2/src/pages/demo/playground/db/user/index.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>